Div の画像を水平方向に中央に配置するにはどうすればよいですか?
開発者は、margin プロパティ、Flexbox モジュール、グリッド ビュー レイアウト、および Position 属性を利用して、画像を div 内の水平方向の中央に配置できます。以下のガイドに従って、div タグ内で画像を水平方向に中央揃えにします。
HTML ファイル内に次のように画像が配置される div があると仮定します。
< ディビジョン クラス = '根' >
< 画像 送信元 = '../book.jpg' 身長 = 「50％」 幅 = 「50％」 クラス = '画像' >
< / ディビジョン >
画像の幅と高さは 50% になり、「image」クラスになります。
Margin プロパティの使用
ユーザーは、margin プロパティを使用して HTML 要素の周囲にスペースを追加できます。ウィンドウ画面のサイズを変更した後の空き領域に応じてマージンを割り当てます。たとえば、margin-left と right を auto に設定し、表示プロパティを block に設定します。
画像 {
表示ブロック;
マージン左: 自動;
マージン右: 自動;
}
上記の例を実行すると、Web ページは次のようになります。
上記の出力では、画像が中央にあることが表示されています。
フレックスボックスモジュールの使用
” フレックスボックス 」は、プロパティの完全なセットが含まれるモジュールです。この例では、ルート要素クラスを選択し、表示プロパティの値として flex を使用します。中心を「」の値として設定します コンテンツの正当化 ' と ' アイテムの整列 ' プロパティ：
。根 {ディスプレイ: フレックス;
正当化する- コンテンツ ： 中心;
整列項目: 中央;
バックグラウンド- 色 ： 青;
}
コードを実行すると、Web ページは次のようになります。
上記の出力は、背景色が「青」に設定された div の中央に画像が表示されていることを示しています。
グリッドビューレイアウトモジュールの使用
グリッド ビュー レイアウトには 12 列があり、合計幅は 100% に設定され、Web ページ上の特定の位置に各要素が配置されます。
。根 {表示: グリッド;
アイテムを配置: 中央;
}
上記のコード スニペットでは、「grid」値が表示プロパティに割り当てられています。 「place-item」は「justify-content」プロパティと「align-items」プロパティの短縮形として使用されます。
出力は、グリッド メソッドを使用して画像が div の中心にあることを認証します。
位置属性の使用
ルートクラスの位置を相対値に設定し、イメージクラスの位置を絶対値に設定します。画像は div の中央に表示できます。
。根 {位置: 相対的;
}
。画像 {
幅 : 700ピクセル;
身長 : 500ピクセル;
位置: 絶対;
左： 50 %;
変換:translateX ( - 50 % ） ;
}
画像は「50%」の左側に移動され、X 軸で「-50%」に戻ります。 div の中央に画像を水平に表示します。
これにより、画像を div の水平方向の中央に配置することができます。
結論
div 要素で画像を水平方向に設定するには、「」を使用します。 マージン ”、” フレックスモジュール ”、” グリッドレイアウト ' と ' 位置 ' プロパティ。 ” マージン 」の左右のプロパティをautoに設定します。 「フレックスモジュール」と「グリッドレイアウト」はそれぞれディスプレイをフレックスとグリッドに設定し、「 アイテムを配置する 画像を中央に配置するプロパティ。 Position プロパティは、ルート クラスに対する相対値と画像クラスに対する絶対値を設定し、「left」プロパティと「transform」プロパティを使用します。このブログでは、div 内の画像を水平方向に中央揃えする方法を実証しました。