>  기사  >  웹 프론트엔드  >  CSS 상자에서 이미지를 중앙에 배치하는 방법

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

青灯夜游
青灯夜游원래의
2021-02-23 15:59:2716223검색

중앙 정렬 방법: 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;

nbsp;html>


	
		<meta>
		<style>
			.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>
	

	

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

효과:

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 지원 필요)

nbsp;html>


	
		<meta>
		<style>
			.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>
	

	

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

렌더링:

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 상자에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.