CSS_html/css_WEB-ITnoseでの要素のセンタリング問題の実装

前書き:

CSS を記述する場合、高さを固定してコンテナー内で要素を垂直方向に中央に配置するのは非常に簡単です。たとえば、コンテナーのパディングや要素のマージンを設定できます。コンテナ内で要素を垂直方向に中央揃えにして、コンテナ内で水平方向に中央揃えにすることも目的の達成に役立ちます。ただし、要素を垂直方向に中央揃えにする方法は次のとおりです。高さが不確かなコンテナ、または固定の高さでテキストの行数が不確かな場合、コンテナを垂直方向に中央揃えにするのはどうでしょうか?要素を垂直方向に中央揃えにするいくつかの方法について説明します。

1. テキストの垂直方向の中央揃え

1. 単一行のテキスト

line-height は高さと同じなので、単一行を中央揃えにすることができます。テキストを縦方向に

2. 複数行のテキスト

複数行のテキストを画像として処理し、span を使用してテキストをカプセル化し、画像と同じ表示属性 (inline-block) を設定できます。次に、垂直方向の中央揃え方法を使用して画像を処理します。複数行のテキストを垂直方向の中央揃えにできます。

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

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     line-height: 200px; 5     background-color: #36AF77; 6 } 7 .content { 8     display: inline-block; 9     vertical-align: middle;10     line-height: 15px;11     font-size: 14px;12 }

実行結果:

2. 画像の垂直方向の中央揃え

1.vertical-align と line-height による垂直方向の中央揃え

れー

れー

実行結果:

2. 高さ 100% のスパンで垂直センタリング

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""></div>

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     line-height: 200px; 5     font-size: 0; 6     background-color: #36AF77; 7 } 8 img { 9     vertical-align: middle;10 }

実行結果:

ここの画像は高さ 100% のパンです。仲間たち、作ってくださいこの行の行高さが div を埋めます。

3. 背景画像を配置する方法

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""><span></span></div

 1 .wrap { 2     width: 200px; 3     height: 200px; 4     background-color: #36AF77; 5 } 6 img { 7     vertical-align: middle; 8 } 9 span {10     display:inline-block;11     height: 100%;12     vertical-align: middle;13 }

ここでは、画像をコンテナの背景として使用し、background-position 属性によって中央に配置します。

4. テーブルセルによる垂直方向の中央揃え

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

1 .wrap {2     width: 200px;3     height: 200px;4     background-color: #36AF77;5     background-image: url("E:/picture/me.jpg");6     background-position: center;7     background-size: 60%;8     background-repeat: no-repeat;9 }

実行結果:

vertical-align の W3C 定義:vertical-align 属性は要素の垂直方向の配置を設定します。

この属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。

表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します。

5. Flex elastic レイアウトを使用して垂直方向のセンタリングを実現します

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""></div>

1 .wrap {2     width: 200px;3     height: 200px;4     background-color: #36AF77;5     display: table-cell;6     font-size: 0;7     vertical-align: middle;8 }

実行結果:

残念ながら、IE10 より前のバージョンはサポートされていません

6. after 疑似クラス

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""></div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9     display: flex;10     justify-content: center;11     align-items: center;12 }

実行結果:

このメソッドは、span 要素が after 疑似クラスによって生成された要素に置き換えられることを除いて、2 番目のメソッドと似ています。

7. 画像の高さがわかっている場合は、追加のブロックレベル要素を使用します

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""></div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9 }10 .wrap:after {11     content: "";12     display: inline-block;13     height: 100%;14     vertical-align: middle;15 }16 img {17     vertical-align: middle;18 }

実行結果:

opacity:0 //透明は表示されませんが、スペースを占有します

8 、画像の高さが既知の場合は margin-top の負のマージンを使用します

<div class="wrap">    <div class="temp"></div>    <img src="E:/picture/me.jpg" alt=""></div

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     width: 200px; 7     height: 200px; 8     background-color: #36AF77; 9 }10 .temp {11     height: 50%;12     margin-bottom: -44px;13     opacity:0;14 }

実行結果:

9. 絶対位置決めの使用

りー

りー

実行結果:

10. 主人公がついに登場 - ユニバーサルセンタリング方法 (絶対位置決めと変換)

<div class="wrap">    <img src="E:/picture/me.jpg" alt=""></div>

 1 img { 2     width: 88px; 3     height: 88px; 4 } 5 .wrap { 6     position: relative; 7     width: 200px; 8     height: 200px; 9     background-color: #36AF77;10 }11 img {12     position:absolute;13     top: 50%;14     left:0;15     right:0;16     margin:auto;17     margin-top: -44px;18 }

実行結果:

50% 位置までの絶対位置決め、そして高さと幅の 50% の負の距離を変換して中央に表示します。

ただし、汎用的な方法は、IE9 以下ではサポートされていません。

水平方向の中央揃えのテキストについては、text-align:center を使用でき、ブロックレベルの要素では margin: 0 auto; を使用できます。これは比較的単純なので詳細は説明しません。

写真を中央に配置する 10 の方法を簡単に紹介します。いくつかの洞察が得られたと思いますか? お母さんは、私が要素を中央に配置できないことを心配する必要はもうありません。

以上