CSSで画像を中央に配置する方法

CSS で画像を中央揃えにする方法: 1. "margin:0 auto" または "text-align:center" スタイルを使用して、画像を水平方向に中央揃えにします。 2. "height == row height" を使用して、画像を垂直方向の中央に配置します。 3. テーブルを使用して画像を垂直方向の中央に配置します。 4. 絶対位置を使用して画像を垂直方向の中央に配置します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

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 src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

2. テキスト text の水平方向の中央揃え属性を使用します-align: 実現する中央揃え 画像は水平方向に中央揃えになります

css 画像の水平方向中央揃えコード:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

(学習ビデオ共有:

css ビデオ チュートリアル )

2. CSS 画像の垂直方向の中央揃えを実装する方法を見てみましょう

1. 高さを使用します== 画像の垂直方向の中央揃えを実現するための行の高さ

#CSS 画像の垂直方向の中央揃えコードは次のとおりです:

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</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 src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</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 src="/static/imghwm/default1.png"  data-src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  class="lazy"  alt=""  style="max-width:90%"/>
</div>

説明 : このメソッドは、画像の幅と高さがわかっている場合に使用できます。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

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