方法-中央の画像
CSSを使用して画像を中央に配置する方法を学びます。
中央の画像:
画像を中央に配置する方法
ステップ1)HTMLを追加します。
例
<img src="paris.jpg" alt="Paris" class="center">
ステップ2)CSSを追加します。
画像を中央に配置するには、左右の余白をに設定auto
してblock
要素にします。
例
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
幅が100%(全幅)に設定されている場合、中央に配置できないことに注意してください。
ヒント:画像のスタイル設定方法の詳細については、 CSS画像チュートリアルにアクセスしてください。