ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像を水平および中央に配置する方法
質問: CSS で画像の水平方向の中央揃えを実現するにはどうすればよいですか?方法: margin: auto; 属性を使用して左右のマージンを等しく設定し、水平方向の中央揃えを実現します。画像の幅を設定し、画像サイズを指定します。画像の表示属性をブロック要素に設定して、画像を水平方向の中央に配置します。
CSS で画像の水平方向の中央揃えを実現する方法
方法:
margin: auto;
属性を使用します。このプロパティは要素の水平方向と垂直方向のマージンを自動的に設定し、要素を水平方向に中央揃えにします。
詳細な手順:
img
margin: auto;
属性を適用します。これにより、要素の左右のマージンが自動的に同じ値に設定され、水平方向の中央に配置されます。 width
属性を使用して設定できます。 display
属性を block
要素に設定します。それ以外の場合、画像はインライン要素として表示され、水平方向の中央に配置できません。 サンプル コード:
<code class="css">img { width: 200px; display: block; margin: auto; }</code>
その他のメソッド:
を使用します。 text-align: center;
プロパティ: このプロパティは通常、テキストの配置に使用されますが、画像を水平方向に中央揃えするために使用することもできます。 image 要素の親要素に text-align
属性を適用し、画像に display: inline-block;
を設定します。 float: left
および float: right
属性を使用します。 この方法は、正確なセンタリングが必要な状況には適していませんが、可能です。画像をほぼ中央に配置します 中央に配置します。 float: left;
を image 要素に適用し、float: right;
を image 要素の後続の要素に適用します。 以上がCSSで画像を水平および中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。