CSS を使用して画像を中央に配置する 3 つの方法

私たちの WEB フロントエンド CSS 開発プロセスでは、Web ページの美しさとユーザーエクスペリエンスのために、画像を中央に配置する必要がある場合があります。画像を中央に配置する方法はたくさんありますが、今日は CSS を使用して画像を中央に配置する 3 つの方法を詳しく紹介します。

1 :

1 <p class="img_wrap">
2  <img src="wgs.jpg">
3 </p>

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

1 .img_wrap{
2     width: 400px;
3     height: 300px;
4     border: 1px dashed #ccc;
5     display: table-cell; //主要是这个属性
6     vertical-align: middle;
7     text-align: center;
8 }

効果は次のとおりです:

3. 画像の外側に p タグを使用し、line-height

:

を設定して画像を垂直方向の中央に配置します。 HTML コードは次のとおりです:

1 <p class="img_wrap"></p>

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

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

レンダリングは次のとおりです:

概要:

画像を中央に配置する方法はたくさんあります。よく使われる 3 つの方法を自分のニーズに合わせて選択してください。あなたの仕事に役立つことを願っています。

関連する推奨事項:

CSS 画像を中央揃えにする方法

CSS 画像の中央揃え: CSS 画像を上下左右に中央揃えにする (水平方向と垂直方向の中央揃え)

HTML コードの中央のテキストと画像を実装するにはどうすればよいですか?

以上がCSS を使用して画像を中央に配置する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。