ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。