HTMLで画像を中央揃えにするにはどうすればよいですか?-htmlチュートリアル-php.cn

HTMLで画像を中央揃えにするにはどうすればよいですか?

青灯夜游

リリース： 2020-05-12 18:16:29

オリジナル

21457 人が閲覧しました

HTMLで画像を中央揃えにするにはどうすればよいですか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

HTMLで画像を中央揃えにするにはどうすればよいですか?

HTMLの基本ともいえる画像を中央揃えにする方法はたくさんありますが、ここではいくつかの方法を紹介します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 3px solid skyblue;
		}
		</style>
	</head>
	<body>
		<div>
			<img  src="1.jpg"    style="max-width:90%" / alt="HTMLで画像を中央揃えにするにはどうすればよいですか?" >
		</div>
	</body>
</html>

ログイン後にコピー

上記のコードのレンダリング:

HTMLで画像を中央揃えにするにはどうすればよいですか?

方法 1:

img{
	position: relative;
	left: 50%;
	top: 50%;
	margin: -60px 0 0 -75px;
}

ログイン後にコピー

画像を与えるタグの位置の配置、位置: 相対、左: 50%、上: 50% はそれぞれ、要素を親コンテナーの幅の半分だけ右に、親コンテナーの高さの半分だけ下に移動することを意味します。は親コンテナに基づいています。これは標準の高さ幅の半分の距離であり、その効果は次のとおりです。

HTMLで画像を中央揃えにするにはどうすればよいですか?

この画像は大きいため、範囲を超えています。部門。。

その後、img 要素を中央に移動する必要があります。マージン: -60px 0 0 -75px; img 要素を左に 75 ピクセル、上に 60 ピクセル移動することを意味します (写真素材のため)幅と高さは 150*120) なので、画像を中央に配置できます。

HTMLで画像を中央揃えにするにはどうすればよいですか?

方法 2:

img{
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

ログイン後にコピー

実は、この方法は上記の方法と似ていますが、個人的には次のように感じています。最初の方法には問題があり、img 要素のサイズに応じてマージンの値を変更する必要があるため、この比較は実用的です。img 要素がすべて同じサイズであるかどうかは問題ではありませんが、この要件は少し難しいです高い。

この方法では、2D 変換、transform:translate (x 軸の移動の値、y 軸の移動の値) を使用します。この方法の利点は、幅と高さを測定する必要がないことです。 img 要素のパーセンテージを直接設定し、transform:translate() で使用されるパーセンテージは、実際には要素自体の幅と高さに相対的です。

方法 3:

2 レベルの親コンテナとして設定し、第 1 レベルに display: table を設定し、第 1 レベルの親コンテナを変換します

その後、imgの上位親コンテナである第2階層にdisplay: table-cellを設定し、

テキスト-align: centerを設定します。第 1 レベルの親コンテナ、

2 番目のレベルのvertical-align: middle を設定すると、画像を中央揃えにするという目的を達成できます

方法 4:

メイン軸とサイド軸の配置を設定します

<div class="a">
	<img  src="img/MEIZU.png"  alt="HTMLで画像を中央揃えにするにはどうすればよいですか?" >
</div>

ログイン後にコピー

div.a{
	width: 600px;
	height: 200px;
	border: 1px solid saddlebrown;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
div.a img{
	border: 1px solid red;
}

ログイン後にコピー

表示: フレックスを親コンテナに設定し、親コンテナを伸縮ボックスに変換します。これは、メイン軸とサイド軸の配置を適用するために必要です。。。。

次に、主軸の配置を justify-content: space-around; に設定します。

注: Internet Explorer 10 以前のブラウザは、justify-content 属性をサポートしていません。

注: Safari 6.1 以降では、-webkit-justify-content プロパティを通じてこのプロパティがサポートされています。

次に、親コンテナの軸間の配置を設定します (align-items: center;

注: Internet Explorer 10 以前のブラウザは、align-items 属性をサポートしていません。

注: Safari 7.0 以降では、-webkit-align-items プロパティを通じてこのプロパティがサポートされています。

何を見ていますか? 画像はすでに中央に配置されています。

Internet Explorer 10 以前のブラウザーがサポートしていないという事実がなければ、実際にはこの方法が最も適切です。

推奨チュートリアル:

html チュートリアル