画像を水平方向および垂直方向に中央揃えにする 5 つの方法の詳細な図とテキストの説明 (コード付き)

ページ レイアウト中に画像の位置を処理する必要があることがよくあります。この記事では主に、CSS を使用して画像の水平方向の中央揃え、画像の垂直方向の中央揃え、および画像の水平方向と垂直方向の中央揃えを実現する方法について説明します。画像 コース比較 実践的で興味のある方は参考にしていただければ幸いです。

1. text-align: center は画像の水平方向の中央揃えを実現します

text-align は通常、テキストの水平方向の中央揃えに使用されますが、画像にも使用できます。コードは次のとおりです。

CSS 部分:

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

HTML 部分:

<div>
    <img  src="img/logo.png" / alt="画像を水平方向および垂直方向に中央揃えにする 5 つの方法の詳細な図とテキストの説明 (コード付き)" >
</div>

レンダリング:

##2. Line-height と text-align: center は画像の水平方向と垂直方向の中央揃えを実現します。 ## line-height の値を高さと等しく設定して、垂直方向の中央揃えを実現します。および text-align: center で水平方向の中央揃えを実現します。 Centered。 HTML 部分は同じで、CSS コードは次のとおりです:

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

レンダリング:

## 表示: table と display: table-cell は、画像の水平方向と垂直方向のセンタリングを実装します。

table メソッドを使用して、display: table、display: table-cell を設定しますが、このメソッドは IE6/IE7 と互換性がありません。 IE67 をサポートする必要がない場合は、この方法を使用できます。

#

<div   style="max-width:90%">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="img/logo.png"  / alt="画像を水平方向および垂直方向に中央揃えにする 5 つの方法の詳細な図とテキストの説明 (コード付き)" >
    </span>
</div>

4。画像の水平方向と垂直方向のセンタリング

配置方法: 親ボックスに相対位置を設定し、子ボックスに絶対位置を設定します。これは、親相対子絶対と呼ばれます。画像の位置の左側を 50%、上側を 50% に設定します (注: これは垂直方向の中央にはなりません)。また、margin-left を画像の長さの半分に設定し、margin-top を半分に設定する必要があります。写真の高さ。 HTML 部分は同じで、CSS コードは次のとおりです。

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

5. 画像の水平方向と垂直方向の中央揃えを実現するための背景です。

背景を使用します: URL画像の水平方向と垂直方向の中央揃えを実現する繰り返しなしの中央中央 中央揃え

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

以上が画像を水平方向および垂直方向に中央揃えにする 5 つの方法の詳細な図とテキストの説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。