ホームページ > 記事 > ウェブフロントエンド > CSSのimgは幅と高さがわかりません。センタリングを実現する方法

CSSのimgは幅と高さがわかりません。センタリングを実現する方法

青灯夜游オリジナル: 2022-09-22 17:28:222240ブラウズ

3 方法: 1. text-align 属性を使用して、img を含む親要素に「text-align: center;」を設定します。 2. フレキシブルボックスレイアウトを使用し、親要素に「display: flex;justify-content: center;」を設定します。 3. グリッドレイアウトを使用し、親要素に「display:grid;align-items:center;justify-items:center;」を設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

方法 1: テキスト配置属性 text-align

text-align を使用して、要素内のテキスト行の配置を制御します。 img の親 div を設定して、img を div のテキストにすることができ、text-align を使用して div 属性を変更できます。 (親要素に属性を追加します)

注: 子要素は inline または inline-block である必要があります。子要素も div である場合は、子に対して display: inline/inline-block を設定する必要があります。ここでは子要素 img がインラインであるため、この手順は省略します。 この方法は、img の中央揃えなどのインライン要素に適しています

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#pic {
				border: 1px solid red;
			    text-align: center;   /*表示div的子元素居中*/
			}
		</style>
	</head>

	<body>

		 <div id="pic">
		        <img  src="img/2.jpg" class="logo" alt="CSSのimgは幅と高さがわかりません。センタリングを実現する方法" >
		 </div>

	</body>
</html>

CSSのimgは幅と高さがわかりません。センタリングを実現する方法

#方法 2: フレキシブルボックスレイアウトを使用する

css

#pic {
    display: flex;   
    justify-content: center;
}

CSSのimgは幅と高さがわかりません。センタリングを実現する方法

フレキシブルボックスレイアウトは、数行の CSS を使用して、ほぼすべてのレイアウトを実現できます。そして最も驚くべきことは、画像のレイアウトや位置を考慮することなく、n 枚の画像の上 2 行を中央に配置できることです。

方法 3: グリッドレイアウトを使用する

フレキシブルボックスは、ナビゲーションバーで最も一般的に使用されます。対照的に、グリッドレイアウトはユニバーサルレイアウトシステムです。

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

CSSのimgは幅と高さがわかりません。センタリングを実現する方法

#したがって、複数の画像を整列させる問題に対処するのに非常に便利です。

(学習ビデオ共有:

Web フロントエンド )

以上がCSSのimgは幅と高さがわかりません。センタリングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WebにおけるCSSの役割とは何ですか次の記事：WebにおけるCSSの役割とは何ですか

続きを見る