CSSのimgは幅と高さがわかりません。センタリングを実現する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-09-22 17:28:22

オリジナル

2241 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。