画像はあらゆる Web アプリケーションの重要な部分です。 Web アプリケーションに大量の画像を含めることは通常推奨されませんが、必要な場合はどこでも画像を使用することが重要です。 CSS は、Web アプリケーションでの画像の表示を制御するのに役立ちます。
画像の配置とは、画像を中央、左、右に配置することを意味します。使用できます 浮く 財産と テキスト整列 画像を配置するためのプロパティ。
画像が div 要素内にある場合は、 テキスト整列 div内の画像を整列させるためのプロパティ。
配列cの文字列
例
この例では、 テキスト整列 財産。画像は div 要素内にあります。
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 今すぐテストしてください 出力
float プロパティの使用
CSS の float プロパティは位置決めプロパティです。要素を左または右に押して、他の要素がその周りを囲むようにするために使用されます。通常、画像やレイアウトで使用されます。
ストアドプログラム制御
要素は水平方向にのみ浮動します。したがって、要素を左右にフローティングすることのみが可能であり、上下にはフローティングすることはできません。フロート要素は、可能な限り左または右に移動できます。簡単に言うと、フローティング要素は左端または右端に表示できることを意味します。
例
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 今すぐテストしてください 出力
