HTML の水平および垂直中央揃えの問題の概要

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約し、ここに載せることにしました。

1. テキストを中央揃えにする

コードをコピー
コードは次のとおりです。

<div class="wrap">
私は真ん中です...
</div>
.. height+line-height+text-center (1行のみ中央揃え可能)
。包む{
幅:px;
高さ:px;
border:px 赤一色;
テキスト配置: 中央;
行の高さ: px;
}

ps:text-align:centerは要素の下のインライン要素のみを中央揃えします
1.2display:table-cell (高さを固定した中央揃えの複数行)

コードをコピー
コードは次のとおりです。

。包む{
幅:px;
高さ:px;
border:px 赤一色;
テキスト配置: 中央;
表示:テーブルセル;
垂直位置合わせ: 中央;
}

display:table-cell: は ie67 では動作しません。display:table; と一緒に使用するのが最善です。
ie67 の場合: (もう使用しませんが、ここに置きます)
方法 1: (em タグの高さは親と同じなので、span と em の中央揃えは、親の span の中央揃えと同じです)

コードをコピー
コードは次のとおりです。

<div class="wrap">
<span>
私は真ん中です...私は真ん中です...私は真ん中です...
</span>
<em>
</div>
。包む{
幅:px;
高さ:px;
border:px 赤一色;
テキスト配置: 中央;
}
.wrap span{
垂直位置合わせ: 中央;
表示:インラインブロック;
幅:px;
}
.wrap em{
身長:%;
垂直位置合わせ: 中央;
表示:インラインブロック;
}

方法 2: (絶対配置された親タグを子要素に追加し、子要素の相対配置を使用して水平方向と垂直方向に中央揃えする)

コードをコピー
コードは次のとおりです。

<div class="wrap">
<span class="span">
<span class="span">私は真ん中です...私は真ん中です...私は真ん中です...私は真ん中です...</span>
</span>
</div>
。包む{
幅:px;
高さ:px;
border:px 赤一色;
表示:テーブル;
位置:相対;
オーバーフロー: 非表示;
}
.wrap .span{
表示:テーブルセル;
垂直位置合わせ: 中央;
テキスト配置: 中央;
*位置:絶対;
トップ:%;
左:%;
}
.wrap .span{
*位置:相対;
トップ:-%;
左:-%;
}

1.3パディング(言うまでもなく内部パディング)

コードをコピー
コードは次のとおりです。

。包む{
幅:px;
border:px 赤一色;
パディング:px;
}

2. 中心となる要素

コードをコピー
コードは次のとおりです。

<div class="wrap">
<span></span>
</div>

2.1position:absolute+margin負の値(マージンを計算するには幅と高さが必要です)

コードをコピー
コードは次のとおりです。

。包む{
幅:px;
高さ:px;
位置:絶対;
トップ:%;
左:%;
上マージン:-px;
左マージン:-px;
border:px 赤一色;
}
.wrap span{
幅:px;
高さ:px;
背景:赤;
位置: 絶対;
トップ:%;
左:%;
上マージン:-px;
左マージン:-px;
}

ps: CSSはDIVの水平中央揃えと垂直中央揃えを実現します

コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>垂直センタリングオンラインデモ DIVCSS5</title>
<スタイル>
#主要 {
位置: 絶対;
幅:400ピクセル;
高さ:200px;
残り:50%;
上位:50%;
左マージン:-200px;
上マージン:-100px;
境界線:1px 実線 #00F
}
/*cssコメント: スクリーンショットの便宜上、CSSコードを囲みます*/
</スタイル>
</head>
<本文>
<div id="main">DIV 水平中央と垂直中央<a href="http://www.divcss5.com/">DIVCSS5</a></div>
</本文>
</html>

水平および垂直の中央揃えの原則の紹介<br />ここでは絶対位置の position:absolute を使用し、left と top を使用して、オブジェクトの上端と左端からの距離を 50% に設定します。ただし、50% に設定すると、ボックスは実際には中央に配置されないため、margin-left:-200px;margin-top:-100px; を設定します。ここでトリックがあります。margin-left の値は幅の半分であり、margin-top の値もオブジェクトの高さの半分です。同時に、それらを負に設定することで、水平および垂直の中央揃えが実現されます。

<<:  Redis イメージの Docker インストールと設定手順

>>:  JavaScript 配列の重複排除とフラット化関数の紹介

推薦する

Windows での MySQL コミュニティ サーバー 8.0.16 のインストールと構成方法のグラフィック チュートリアル

最近、MySQL関連の構文をよく見かけます。また、MySQLストアドプロシージャの書き方も学びたいの...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

Linuxでディスクをマウントする方法

仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

ul リスト タグ デザイン ウェブ ページ 複数列レイアウト

数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

Nexus サーバーを設定するための詳細な手順

1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...

MySQLの文字セット設定を5分で理解しましょう

目次1. コンテンツの概要2. 文字セットと文字順序の概念と関係3. MySQL でサポートされてい...

Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明

まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...

Vue3の状態管理の使用方法の詳細な説明

目次背景提供/注入共有状態の抽出データを提供するデータの挿入まとめ反応的な共有状態の抽出共有状態の使...

Dockerコンテナでyumを呼び出すときのエラーの解決方法

dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...