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. 中心となる要素

コードをコピー

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

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 配列の重複排除とフラット化関数の紹介