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 サイトの他の関連記事を参照してください。