垂直方向の中央揃えを実現する CSS の 4 つの方法-CSSチュートリアル-php.cn

この記事では、垂直方向のセンタリング効果を実現するための 4 種類の CSS を整理します。アイデアは明確で非常に優れており、必要な友人は参考にしてください。

Line-height は垂直方向のセンタリングを実現します。単一行のテキストの

前単一行のテキストを垂直方向に中央揃えにするには、高さと行の高さを同じ値に設定する必要があると常々思っていましたが、高さを設定する必要はありません。実際、テキスト自体は行の中央に表示されます。高さを設定しない場合、行の高さによって高さが拡張されます。

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p class="test">测试文字</p>

ログイン後にコピー

垂直方向の中央揃えを実現するにはvertical-align:middleを設定します

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

table-cell 要素 -align:middle により、すべての子要素が垂直方向の中央に配置されます。これはテーブル内のセルの垂直方向の中央揃えに似ています

[注] IE7 ブラウザーがサポートしている場合は、

テーブル構造に変更できます

[注] table-cell に設定された p はフローティングまたは使用できません。絶対配置。フローティングまたは絶対配置では、要素がブロックレベルの要素特性を持ち、それによってテーブルセル要素の垂直方向の位置合わせ機能が失われるためです。

フローティングや絶対位置の処理が必要な場合は、外側にもう1層pを置く必要があります。

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
    <p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>   
</p>

ログイン後にコピー

垂直方向の中央揃えを実現する CSS の 4 つの方法

【2】子要素が画像の場合、高さの代わりに親要素の行の高さを設定し、親要素のfont-sizeを0に設定します。

vertical-align: middle の説明は、要素の中点が親要素のベースラインに親要素の文字 X の高さの 1/2 を加えた位置に配置されることです。文字 X が em ボックス内で垂直方向の中央に配置されておらず、各フォント内の文字 X の高位置と低位置が一貫していないためです。

そのため、フォントサイズが大きいほど、違いがより明確になります。 font-size が 0 の場合、文字 X のフォントサイズを 0 に設定するのと同じなので、完全な垂直方向のセンタリングを実現できます。

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p 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">  
</p>

ログイン後にコピー

垂直方向の中央揃えを実現する CSS の 4 つの方法

【3】新しい要素を追加して垂直方向のセンタリング効果を実現します

新しい要素の高さを親の高さに設定し、幅を0に設定し、垂直方向のセンタリングのvertical-alignを設定します。 middle インラインブロック要素。 2 つの要素間のスペースは解析されるため、親レベルで font-size:0 を設定し、構造要件が厳密でない場合は、子レベルで font-size を必要な値に設定する必要があります。 2 つの要素が 1 行にある場合は、font-size:0 を設定する必要はありません。

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

ログイン後にコピー

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

【1】子要素の高さが可変の場合、translateY(-50%)でtop50%を使用してセンタリング効果を実現します。

移動関数のパーセンテージはそれ自体の高さに相対的なため、top:50% とtranslateY(-50%) を組み合わせることでセンタリング効果を実現できます。

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

[注意] 子要素の高さがわかっている場合、translate() 関数を margin-top: 負の高さの値に置き換えることもできます。

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

ログイン後にコピー

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

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

ログイン後にコピー

Align水平方向の中央に、要素の外側のレイヤーに p のレイヤーを配置して絶対値を設定し、要素の負のマージン左または相対負の左属性を設定して、水平方向の中央揃え効果を実現します。ただし、マージンは包含ブロックの幅に相対的なものであるため、margin-top:-50% は高さの -50% ではなく幅を取得するため、包含ブロックの高さである相対パーセンテージ値には現実的ではありません。 is auto この場合、Chrome、safari、および IE8+ ブラウザは要素の上位パーセンテージ値の設定をサポートしていないため、実行できません。

アイデア 4: フレキシブルボックスモデルのフレックスを使用して垂直方向のセンタリングを実現します

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

[1] スケーラブルコンテナの align-items に交差軸の配置を設定します。 center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

ログイン後にコピー

【2】スケーラブルプロジェクトにマージンを設定: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

ログイン後にコピー

以上が垂直方向の中央揃えを実現する CSS の 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。