CSS を垂直方向に中央揃えにする 6 つの方法_html/css_WEB-ITnose

からの再投稿

CSS を使用して要素を水平方向に中央揃えにするのは比較的簡単です。行レベルの要素は親要素のテキスト配置の中央を設定し、ブロックレベルの要素は独自の左右のマージンを自動に設定します。この記事では、CSS を使用して要素を垂直方向に中央揃えにする 6 つの方法をまとめています。それぞれの方法は、実際の使用プロセスで特定の方法を選択するだけです。

Line-Height メソッド

トライアル: 単一行テキストを垂直方向に中央揃え、デモ

コード:

html

123

<div id="parent"> <div id="child">Text here</div> </div>

css

123

#child { line-height: 200px; }

画像を垂直中央に配置するコードは次のとおりです

html

css

123

<div id="parent"> <img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt=""> </div>

CSS テーブルメソッド

適用可能: ユニバーサル、デモ

コード:

html

りー

りーcss

123456

#parent { line-height: 200px; } #parent img { vertical-align: middle; }

下位バージョンの IE 修正バグ:

123

<div id="parent"> <div id="child">Content here</div> </div>

絶対位置決めとマイナスマージン

適用対象: ブロック レベル要素、デモ

コード:

html

12345

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

css

rree

rree 絶対位置決めとストレッチ

適用可能: ユニバーサル、ただし IE バージョンが 7 より低い場合は正しく動作しません、デモ

コード:

html

123

れーい css

#child { display: inline-block; }

123

上下のパディングを均等にする 適用対象: 一般、デモ

コード:

html

あーるー

あーる

css

あーる

Floater Div 適用可能: ユニバーサル、デモ コード:

html

rree

rree

css

<div id="parent"> <div id="child">Content here</div> </div>

上記は実際に使用する際に合理的に選択できる 6 つの方法です。 「垂直センタリング」の記事を参照してください。