html5で画像を中央に表示する方法

画像の中央揃え方法: 1. "margin:0 auto" を使用して水平方向の中央揃えを実現します。 2. "text-align:center" を使用して水平方向の中央揃えを実現します。 3. line-height を使用して垂直方向の中央揃えを実現します。 4. テーブルを使用して垂直方向のセンタリングを実現します; 5. 位置を使用して垂直方向のセンタリングを実現します。

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

1. まず、CSS 画像を水平方向に中央揃えにする方法を見てみましょう

1. margin:0 auto を使用して、画像の水平方向の中央揃えを実現します

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

<div style="text-align:center;width:500px;border:greensolid1px;">
<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 の水平方向の中央揃え属性を使用します。画像の

#html 画像の水平方向のセンタリング コード:

<div>
<div style="text-align:center;width:500px;border:greensolid1px;">
<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 line-height を使用して画像の垂直方向の中央揃えを実現します

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

<div style="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">
<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. table を使用して、画像の垂直方向の中央揃えを実現します。

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

<div style="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;">
<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>

注 : このメソッドは、テーブルの垂直方向の中央揃え属性を利用します。

説明: display:table;## を使用します。 # と display:table-cell をここに; table をシミュレートします。このメソッドは IE6/IE7 と互換性がありません。IE67 は display:table をサポートしません。 IE67 をサポートする必要はなく、

を使用できます。この方法には欠点があります。

display:table; を設定すると、元のレイアウトが変更される可能性があります

3. position## を使用します #画像の垂直方向の中央揃えを実現しますHTML 画像の垂直方向の中央揃えのコードは次のとおりです:

<div style="width:500px;height:200px;position:relative;border:greensolid1px;">
<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>

手順:

画像の幅と高さがわかっている場合は、この方法を使用できます。 推奨学習:

html5 ビデオ チュートリアル

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