CSS_html/css_WEB-ITnose で垂直方向の配置を実現する 4 つの方法

× Catalog [1]line-height [2]vertical-align [3]absolute [4]flex

前の言葉

水平方向のセンタリングと比較して、人々は垂直方向のセンタリングに少し困難を感じています。 -align が正しく使用できません。実際、垂直方向のセンタリングを実現するには、いくつかのアイデアが必要になります。この記事では、垂直方向のセンタリングに関する 4 つのアイデアを紹介します

アイデア 1: Line-height は、単一行テキストの垂直方向のセンタリングを実現します

一行テキストを垂直方向のセンタリングするには、高さと行が必要であるという格言があります。高さは同じ値に設定する必要がありますが、高さを設定する必要はありません。実際、テキスト自体は行の中央に表示されます。高さを設定せずに行の高さで高さをサポートする

<style>.test{    line-height: 50px;    background-color: lightblue;}    </style>

<div class="test">测试文字</div>

アイデア2:vertical-align:middleを設定して垂直方向のセンタリングを実現する

【1】親要素の表示をtableに設定する- cell

table-cell要素にvertical-align:middleを設定すると、そのすべての子要素が垂直方向の中央揃えになります。これはテーブル内のセルの垂直方向の中央揃えに似ています

[注] IE7 ブラウザのサポートが必要な場合は、

[注] table-cell に設定された div は使用できませんフローティングまたは絶対配置は、要素にブロックレベルの要素特性を持たせるため、テーブルセル要素の垂直位置合わせ機能が失われます。フローティングや絶対配置が必要な場合は、外側に別のdivレイヤーを置く必要があります

<style>.parent{  display: table-cell;  vertical-align: middle;}</style>

<div class="parent" style="background-color: gray;height: 100px;">    <div class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</div>   </div>  

【2】子要素が画像の場合、高さの代わりに親要素の行の高さを設定します、親要素の行の高さのフォントサイズを 0 に設定します

vertical-align:middle の説明は、要素の中点が親要素のベースラインに、文字 X の高さの 1/2 を加えたものに揃えられるということです。親要素。文字 X が em ボックス内で垂直方向の中央に配置されておらず、各フォント内の文字 X の高位置と低位置が一貫していないためです。したがって、フォントサイズが大きいほど、違いがより顕著になります。 font-sizeが0の場合、文字のフォントサイズを設定するのと同等です

新規要素の高さを親の高さに、幅を0に設定し、さらにverticalのinline-block要素を垂直方向中央に設定します-整列:中央。 2 つの要素間のスペースは解析されるため、親レベルで font-size:0 を設定し、構造要件が厳密でない場合は、子レベルで font-size を必要な値に設定する必要があります。 2つの要素を1行に配置する場合は、font-size:0を設定する必要はありません

<style>.parent{  line-height: 100px;  font-size: 0;}.child{  vertical-align: middle;}</style>

<div class="parent" style="background-color: lightgray;width:200px;">    <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  </div>

アイデア3: 絶対位置決めによる垂直方向のセンタリング

【1】translate() のディスプレイスメントを使用する関数

翻訳関数のパーセンテージは相対的です 独自の高さに基づいているため、top:50% と translationY(-50%) を組み合わせることでセンタリング効果を実現できます

[注意] IE9 ブラウザはサポートしていません

[注意] 】 子要素の高さが分かっていればtranslate()関数も利用可能 margin-top:負の高さの値に置き換える

<style>.parent{  height: 100px;  font-size: 0;}.child{  display: inline-block;  font-size: 20px;  vertical-align: middle;}.childSbling{  display: inline-block;  height: 100%;  vertical-align: middle;}</style>

<div class="parent" style="background-color: lightgray; width:200px;">  <div class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</div>  <i class="childSbling"></i> </div> 

【2】子要素の高さが固定の場合絶対配置のボックス モデル属性と組み合わせることで、センタリング効果を実現できます

<style>.parent{  position:relative;}.child{  position: absolute;  top: 50%;  transform: translateY(-50%);}</style>

<div class="parent" style="background-color: lightgray; height:100px;">  <div class="child" style="background-color: lightblue;">测试文字</div></div>  

<style>.parent{  position: relative;}.child{ position: absolute; top: 0; bottom: 0; margin: auto 0; height: 50px;}</style>

<style>.parent{  display: flex;  align-items: center;}</style>