垂直方向の中央揃えを実現するために一般的に使用される 4 つの CSS メソッド

今回は、垂直方向の中央揃えを実現するためによく使用される 4 つの CSS メソッドを紹介します。CSS を使用して垂直方向の中央揃えを実現する際の 注意事項は何ですか? ここで実際のケースを見てみましょう。

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

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p>测试文字</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>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   

【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>
  <img  alt="垂直方向の中央揃えを実現するために一般的に使用される 4 つの CSS メソッド" >  
</p>

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

新しい要素の高さを親の高さに設定し、幅を0に設定し、垂直方向のセンタリングも垂直に設定します- align:middle の inline-block 要素。 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>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 

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>
  </p><p>测试文字</p>

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

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

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

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

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>   

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

以上が垂直方向の中央揃えを実現するために一般的に使用される 4 つの CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。