CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

青灯夜游

Oct 19, 2018 pm 12:00 PM

位置決め

CSSでimg画像を中央に配置するにはどうすればよいですか?前回の記事 [cssでimg画像を中央揃えにする方法は？ CSS の表示属性で画像のセンタリングを実現] 画像のセンタリングを実現する表示属性の 2 つの方法を紹介しました。この記事では、位置配置を使用して画像のセンタリングを実現する CSS の 3 つの方法 (コード例) をお届けします。困っている友人は参考にしていただければ幸いです。

1. 画像イメージを中央に配置する CSS 位置を設定し、画像イメージの幅と高さを確認します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        margin-top: -75px; /* 高度的一半 */
		        margin-left: -100px; /* 宽度的一半 */
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/988/337/945/1539916533300688.jpg"  class="lazy"   / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

手順:

デモボックスを相対配置に設定し、画像を絶対配置に設定します。このとき、左上: 50%、上: 50% になります。画像の角は div の中央にあります。

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

画像を中央に配置したい場合は、画像の中心とデモボックスの中心が一致する必要があるため、画像を半分だけ上に移動する必要があります。画像の高さの半分、幅の半分だけ左に移動します。

margin-top: -75px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */

ログイン後にコピー

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

#2、CSS の位置決めで img 画像が中央に配置されるように設定されていますが、img 画像の幅と高さがわかりません

1)、画像の中央揃えを実現するための CSS 位置位置変換

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/214/416/131/1539921063326606.jpg"  class="lazy"   / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

手順:

左に設定:50%、上に設定:50%、このとき、画像の左上隅がデモボックスの中心に来るようにします。画像の中心がデモボックスの中心と一致する限り、画像を中央に配置できます。 (詳細については、方法 1 を参照してください)

それでは、画像の中心をデモボックスの中心と一致させるにはどうすればよいでしょうか?画像を画像の高さの半分だけ上に、画像の幅の半分だけ左に移動する必要があります。しかし、画像の幅と高さがわからないのですが、どうすればよいですか?現時点では、transform:translate(-50%,-50%); を使用して、目的の効果を実現します。

2)、画像の中央揃えを実現するための CSS 位置の位置決めマージン

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 0;
		        left: 0;
		        right: 0;
		        bottom: 0;
		        margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/214/416/131/1539921063326606.jpg"  class="lazy"   / alt="CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

説明:

デモボックスを相対配置、画像を絶対配置のabsolute、上:0、左:0、右:0、下:0に設定します。このとき、画像の左上と上が一致します。デモボックスの左隅:

CSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)

margin: auto; を使用すると、img 画像がデモボックスに対して水平および垂直に配置されます。画像のセンタリング効果が得られます。

要約: 上記は、img 画像を中央に配置するための CSS 位置配置の 3 つの方法を完全に紹介したものであり、皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS3 ビデオチュートリアル、Html5 ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

以上がCSS 配置を使用して画像画像を中央に配置する 3 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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