CSS を使用して要素の垂直方向の中央揃えを実現するいくつかの方法についての簡単な説明

#CSS を使用して要素を水平方向に中央揃えにします。行レベルの要素は親要素のテキスト配置の中心を設定し、ブロックレベルの要素は親要素のテキスト配置の中心を設定します。右マージンを自動に設定するだけです。この記事では、CSSを使用して要素を縦方向に中央揃えにする6つの方法をまとめましたので、見てみましょう。

#Line-Height メソッド

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

コード: ## #

html

ここにテキスト

#css

#child { 行の高さ: 200px; }

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

#html

##

#css

#parent { 行の高さ: 200px; } #親画像 { 垂直方向の配置: 中央; }

CSS テーブル メソッド

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

コード:

html

ここにコンテンツcss

<pre class="brush:php;toolbar:false">#親 {表示: テーブル;}
＃子供 {
表示: テーブルセル;
垂直方向の配置: 中央;
}

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

#child {
表示: インラインブロック;
}

絶対位置決めと負のマージン

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

コード：

html

ここにコンテンツ

#css

#parent {位置: 相対;} ＃子供 { 位置: 絶対; トップ: 50%; 左: 50%。 高さ: 30%; 幅: 50%; マージン: -15% 0 0 -25%; }

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

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

html

ここにコンテンツ#css

#parent {位置: 相対;} ＃子供 { 位置: 絶対; トップ: 0; 下: 0; 左: 0; 右: 0; 幅: 50%; 高さ: 30%; マージン: 自動; }

上下のパディングを均等にする

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

コード:

html

ここにコンテンツcss

＃＃＃＃親 {
パディング: 5% 0;
}
＃子供 {
パディング: 10% 0;
}<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">

ログイン後にコピー

ログイン後にコピー