CSS 상자에서 이미지를 중앙에 배치하는 방법-CSS 튜토리얼-php.cn

CSS 상자에서 이미지를 중앙에 배치하는 방법

青灯夜游

풀어 주다： 2023-01-03 09:24:47

원래의

16241명이 탐색했습니다.

중앙 정렬 방법: 1. 상자의 상대 위치와 그림의 절대 위치를 설정한 다음 그림의 위치를 조정합니다. 2. img 이미지 요소를 블록 수준 요소로 설정한 다음 table-cell 및 "vertical-align:middle;"을 사용하여 중앙에 배치합니다. 3. Flexbox 레이아웃을 사용하여 중앙에 배치합니다.

CSS 상자에서 이미지를 중앙에 배치하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css를 사용하여 div 상자의 이미지 중앙에 배치

첫 번째 방법: CSS의 위치 속성을 사용합니다

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div1 {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px; 
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>

	<body>

		<div class="div1">
			<img  src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" >
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS 상자에서 이미지를 중앙에 배치하는 방법

두 번째 방법: 다음의 새 속성 테이블을 사용합니다. css3 -cell, Vertical-align:middle;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: table-cell;
            	vertical-align: middle;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>

		<div class="div">
			<img  src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" >
		</div>
	</body>

</html>

로그인 후 복사

효과:

CSS 상자에서 이미지를 중앙에 배치하는 방법

[추천 튜토리얼: CSS 비디오 튜토리얼 ]

세 번째 방법: Flexbox 레이아웃 사용

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: flex;
				/*!*flex-direction: column;*!可写可不写*/
				justify-content: center;
				align-items: center;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>

		<div class="div">
			<img  src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" >
		</div>
	</body>

</html>

로그인 후 복사

효과:

CSS 상자에서 이미지를 중앙에 배치하는 방법

네 번째 방법: 변환 속성 사용(단점: Html5 지원 필요)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50%;
				left: 50%;
				-ms-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		</style>
	</head>

	<body>

		<div class="div">
			<img  src="img/1.jpg" / alt="CSS 상자에서 이미지를 중앙에 배치하는 방법" >
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS 상자에서 이미지를 중앙에 배치하는 방법