ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS Centering_html/css_WEB-ITnose の完全ガイド

CSS Centering_html/css_WEB-ITnose の完全ガイド

WBOY
リリース: 2016-06-21 08:55:50
オリジナル
1353 人が閲覧しました

もともと CSS-Trick で公開されたこの記事は、記事内のメソッドの抽出に重点を置いており、完全には翻訳されていません。必要に応じて、原文を直接ご覧ください。

CSS の要素の中央揃えの問題についてよく不満を言う人がいますが、実際には、この問題は複雑ではなく、単に多くの方法があり、状況に応じてその中から 1 つを選択する必要があるだけです。次に、問題を単純化するために「デシジョン ツリー」を作成します。まず、中央揃えにする必要があります:

  • 水平方向

    • inline または inline-* 要素 (テキストやリンクなど) を中央揃えにする必要がありますか?

    • ブロック クラス要素を中央に配置する必要がありますか?

    • 複数のブロック要素を中央に配置する必要がありますか?

  • 垂直

    • inline または inline-* 要素 (テキストやリンクなど) を中央揃えにする必要がありますか?

    • ブロック クラス要素を中央に配置する必要がありますか?

  • 水平方向と垂直方向の両方

    • 幅と高さは固定

    • いいえ 固定幅と高さ

    • フレックスボックスを使用

水平方向の中央揃え

水平方向の中央揃え インラインまたはインライン-* 要素

インライン要素をブロック要素内で水平方向に簡単に中央に配置できます。 次のコードは、inline、inline-block、inline-table、inline-flex などに有効です。

.parent {  text-align: center;}
ログイン後にコピー

ブロッククラスの要素を水平方向にセンタリング

ブロック要素を固定幅に設定した場合、要素の margin-left と margin-right の値を auto に設定する方法が使えます水平方向のセンタリングを実現します。

.child {  width: 400px;  margin: 0 auto;}
ログイン後にコピー

複数のブロック クラスの要素を水平方向に中央揃え

インライン ブロックを通じて実現

.parent {  text-align: center;}.child {  display: inline-block;  text-align: left;}
ログイン後にコピー

フレックスボックスを通じて実現

.parent {  display: flex;  justify-content: center;}
ログイン後にコピー

垂直方向に中央揃え

垂直方向の中央揃えの inline または inline-* 要素

単一行

インライン/テキスト要素は、同じ上下のパディング値を設定するだけで垂直方向の中央揃えを実現できます。

.center {  pading-top: 30px;  padding-bottom: 30px;}
ログイン後にコピー

何らかの理由でパディングを使用できない場合は、line-height を高さと同じに設定して目的を達成することもできます。

.center {  height: 100px;  line-height: 100px;  white-space: nowrap;}
ログイン後にコピー

複数行

この状況にも同じ上下のパディングを適用できます。それが機能しない場合は、親要素の表示を設定してみてください。要素を table に変換すると同時に、要素の表示が table-cell に設定され、さらにvertical-alignが設定されます。

.parent {  display: table;  width: 200px;  height: 400px;}.child {  display: table-cell;  vertical-align: middle;}
ログイン後にコピー

上記の方法が機能しない場合は、フレックスボックスを使用して、単一のフレックスボックス子要素を親要素内で簡単に中央に配置できます。この方法では、親要素の高さが固定されている必要があることに注意してください。

.parent {  display: flex;  justify-content: center;  flex-direction: column;  height: 400px;}
ログイン後にコピー

上記の 2 つの方法のどちらも使用できない場合は、擬似要素 ::before を使用して高さを拡張し、テキストを垂直方向に中央揃えにする「ゴースト要素」テクニックを使用できます。

.parent {  position: relative;}.parent::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.child {  display: inline-block;  vertical-align: middle;}
ログイン後にコピー

垂直中央のブロック クラス要素

既知の要素の高さ

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}
ログイン後にコピー

不明な要素の高さ

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}
ログイン後にコピー

フレックスボックスを使用

.parent {  display: flex;  flex-direction: column;  justify-content: center;}
ログイン後にコピー

水平方向と垂直方向の両方

幅と高さは固定です

.parent {  position: relative;}.child {  width: 300px;  height: 100px;  padding: 20px;  position: absolute;  top: 50%;  left: 50%;  margin: -70px 0 0 -170px;}
ログイン後にコピー

幅と高さは固定されていません

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
ログイン後にコピー

フレックスボックスを使用します

.parent {  display: flex;  justify-content: center;  align-items: center;}
ログイン後にコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート