ホームページ > 記事 > ウェブフロントエンド > CSSで画像を中央に配置するにはどうすればよいですか? CSS画像を中央揃えにする方法まとめ
Webページをレイアウトする際、画像の位置がページ全体の美しさに影響を与える場合があるため、画像の配置を変更する必要があります。そこで、画像の配置については次の記事で紹介します。 CSS を使用して Web ページの中央揃えを実現する方法は、困っている友人の参考になります。
CSS画像の中央揃えは、CSS画像の水平中央揃えと垂直中央揃えの2つに分けられるので、それぞれの画像中央揃えの実装方法を見てみましょう。
1. まず、CSS 画像を水平方向に中央揃えにする方法を見てみましょう。
1. margin: 0 auto を使用して画像を水平方向に中央揃えにします。
css 画像の水平方向の中央揃えコード:
<div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin: 0 auto;" /> </div>2. 水平方向の中央揃え属性 text-align: center を使用して、画像の水平方向の中央揃えを実現します。
css 画像の水平方向の中央揃えコード:
<div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" /> </div>2 CSS 画像の垂直方向の中央揃えを実装する方法を見てみましょう
1. height == 行の高さを使用して画像を垂直方向に中央揃えにします
CSS 画像の垂直方向の中央揃えコードは次のとおりです:
<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block; vertical-align: middle;" /> </div>注: このメソッドは使用する前に高さを指定する必要があります。 2. テーブルを使用して画像の垂直方向の中央揃えを実現します。
css 画像の垂直方向の中央揃えコードは次のとおりです:
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;"> <span style="display: table-cell; vertical-align: middle; "> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" /> </span> </div>注: このメソッドはテーブルの垂直方向のセンタリング属性を使用します。説明: ここではテーブルをシミュレートするために使用されます。このメソッドは IE6/ とは互換性がありません。 IE7 と IE67 は display: table をサポートしていません。IE67 をサポートする必要がない場合は、これを使用できます。この方法には欠点があります。display: table を設定すると、元のレイアウトが変更される可能性があります。 3. 絶対配置を使用して画像の垂直方向の中央揃えを実現します。
css 画像の垂直方向の中央揃えコードは次のとおりです:
<div style="width: 500px;height:200px; position: relative; border: green solid 1px;"> <img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /> </div>注: このメソッドは次のとおりです。画像の幅と高さがわかっている場合に使用されます。 この記事はここで終わります。上記のプロパティの詳細については、
css ユーザー マニュアル
を参照してください。以上がCSSで画像を中央に配置するにはどうすればよいですか? CSS画像を中央揃えにする方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。