ホームページ > 記事 > ウェブフロントエンド > CSSで画像を中央に配置する方法
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。 Webページをレイアウトする際、写真の位置によってページ全体の美しさが左右される場合がありますので、写真の配置を変更する必要がある場合は、以下の記事で紹介します。 CSS を使用して画像を Web ページの中央に配置する方法は、困っている友達の参考になるでしょう。 CSS画像のセンタリングは、CSS画像の水平センタリングと垂直センタリングの2つに分けられるので、それぞれの画像センタリングの実装方法を見てみましょう。CSS で画像を中央揃えにする方法: 1. "margin:0 auto" または "text-align:center" スタイルを使用して、画像を水平方向に中央揃えにします。 2. "height == row height" を使用して、画像を垂直方向の中央に配置します。 3. テーブルを使用して画像を垂直方向の中央に配置します。 4. 絶対位置を使用して画像を垂直方向の中央に配置します。
#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: 実現する中央揃え 画像は水平方向に中央揃えになります
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>(学習ビデオ共有:
css ビデオ チュートリアル )
1. 高さを使用します== 画像の垂直方向の中央揃えを実現するための行の高さ
#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で画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。