CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)

青灯夜游

Oct 19, 2018 pm 12:00 PM

위치 포지셔닝

CSS로 img 이미지를 중앙에 맞추는 방법은 무엇인가요? 이전 글에서 [CSS에서 img 이미지를 중앙에 맞추는 방법은? CSS의 표시 속성이 이미지 센터링을 구현합니다 ] 이미지 센터링을 구현하는 두 가지 표시 속성 방법을 소개했습니다. 이번 글에서는 위치 위치 지정을 사용하여 img 이미지 센터링을 구현하는 CSS의 3가지 방법을 소개하겠습니다(코드 예제). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1 img 이미지를 중앙에 배치하고 img 이미지의 너비와 높이를 알 수 있도록 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 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)" >
		</div>
	</body>
</html>

로그인 후 복사

Rendering:
#🎜 🎜## 🎜🎜#

CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제) 지침:

데모 상자를 상대 위치로 설정하고 img를 절대 위치로 설정합니다. 왼쪽:50%, 위쪽 :50%, 이때 이미지의 왼쪽 상단이 div의 중앙에 위치합니다.

CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제) 그림을 중앙에 맞추려면 그림의 중앙과 데모박스의 중앙이 일치해야 하므로 그림을 그림 높이의 절반만큼 위쪽으로 이동한 다음 쪽으로 이동합니다. 이미지를 너비의 절반만큼 왼쪽으로 이동합니다.

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

로그인 후 복사

CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 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 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)" >
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

설명: CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)

왼쪽:50%, 위쪽:50%로 설정하여 이때 그림의 왼쪽 상단이 그림의 중앙만큼 데모 상자의 중앙에 위치하도록 합니다. 데모 상자의 중심과 일치하면 그림이 중앙에 위치할 수 있습니다. (자세한 내용은 1번 방법 참조)

그렇다면 어떻게 그림의 중심을 데모 박스의 중심과 일치시킬 수 있을까요? 이미지 높이의 절반만큼 위로, 이미지 너비의 절반만큼 왼쪽으로 이미지를 이동해야 합니다. 그런데 이미지의 너비와 높이를 모르겠어요. 어떻게 해야 하나요? 이때 원하는 효과를 얻기 위해

transform:transform(-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 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)" >
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

#🎜🎜 # 설명:

CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)

데모 상자를 상대 위치로 설정하고 img를 절대 위치로 설정합니다. 절대, 위쪽: 0, 왼쪽: 0, 오른쪽: 0, 아래쪽: 0, 이때 그림의 왼쪽 상단 모서리는 데모 상자의 왼쪽 상단 모서리와 일치합니다.

사용할 때

margin: auto;#🎜 🎜#img 그림을 기준으로 만듭니다. 데모 상자를 수평 및 수직 중앙에 배치하면 이미지 중앙 정렬 효과를 얻을 수 있습니다. CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)

요약: 위 내용은 CSS를 중앙 img 이미지에 배치하는 세 가지 방법에 대한 완전한 소개입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS3 비디오 튜토리얼 , Html5 비디오 튜토리얼

bootstrap 비디오 튜토리얼 을 방문하세요!

위 내용은 CSS 위치 지정을 사용하여 img 이미지를 중앙에 배치하는 3가지 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명