CSS3 格納式ボックスを使用して垂直方向の中央に配置する image_html/css_WEB-ITnose

CSS を使用して画像の垂直方向の中央揃えを実現する方法は数多くあります。CSS3 の格納可能なボックスを使用して画像の垂直方向の中央揃えを実現できます。

コードは次のとおりです:

<div class="box">    <img src="1.png" alt=""></div>

1 .box{4     display: flex;    /*容器为伸缩盒*/5     align-items: center;  /*纵轴方向上的对齐方式设置为居中*/6 }7 img{8     width: 100%;9 }

上記は、Android 4.4 以降をサポートする新しいバージョンの伸縮ボックスによって実装されています。Android 4.4 と互換性を持たせる必要がある場合は、次のコードを追加する必要があります。古い伸縮式ボックスは次のようになります。