CSS は、Web アプリケーションでの画像の表示を制御するのに役立ちます。画像やテキストの中央揃えは CSS の一般的なタスクです。画像を中央に配置するには、次の値を設定する必要があります。 左マージン そして 右マージン に 自動 そして、それを使用してブロック要素にします 表示ブロック; 財産。
画像が div 要素内にある場合は、 テキスト整列: 中央; 画像を div の中央に配置するためのプロパティ。
の 要素はインライン要素であると言われており、 テキスト整列: 中央; CSS のプロパティを、それを含む親要素に追加します。
注: 幅が 100% (全角) に設定されている場合、画像を中央に配置することはできません。
速記プロパティを使用できます マージン そしてそれを次のように設定します 自動 を使用するのではなく、画像を中央に配置します。 左マージン そして 右マージン 財産。
適用して画像を中央に配置する方法を見てみましょう テキスト整列: 中央; プロパティをその親要素に追加します。
例
この例では、 テキスト整列: 中央; 財産。画像はdiv要素内にあります。
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> 今すぐテストしてください 出力
例
今、私たちが使っているのは、 マージン左: 自動;マージン右: 自動; そして 表示ブロック; 画像を中央に揃えるプロパティ。
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } 今すぐテストしてください 出力
映画女優カジャール
