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 画像の水平方向の中央揃えコード:

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

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

2. CSS 画像の垂直方向のセンタリングを実装する方法を見てみましょう

1line-heightを使用して画像の垂直方向の中央揃えを実現します

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

注:このメソッドを使用するには、事前に高さを指定する必要があります。

2.tableを使用して、画像の垂直方向の中央揃えを実現します。

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

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

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

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

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

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

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