CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).-CSS 튜토리얼-php.cn

CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).

青灯夜游

풀어 주다： 2020-07-10 17:19:14

원래의

70773명이 탐색했습니다.

프런트엔드 페이지를 개발할 때 페이지를 아름답게 만들기 위해 이미지가 중앙에 배치됩니다. 그렇다면 CSS를 사용하여 img 이미지를 중앙에 배치하는 방법은 무엇입니까? 이 기사에서는 CSS를 사용하여 img 이미지를 중앙에 배치하는 방법을 보여줍니다. CSS의 표시 속성은 이미지 센터링(코드 예제)을 구현하므로 CSS의 표시 속성을 img 이미지를 중앙에 배치하는 두 가지 방법을 누구나 이해하고 익힐 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 이미지 센터링을 구현하기 위한 display 속성의 두 가지 방법을 살펴보겠습니다. 두 가지 방법은 무엇인가요?

1. 디스플레이의 table-cell 속성 값을 사용하고 text-align: 및 을 일치시킵니다. 수직 정렬: 중간;그림을 가운데로 설정

2 display: flex;, 유연한 레이아웃 사용 flex#🎜🎜 #img 이미지의 중앙 정렬을 설정하려면

이 두 가지 방법으로 이미지 중앙 정렬을 구현하는 방법을 간단한 코드 예제를 통해 자세히 살펴보겠습니다.

1. img 태그 이미지의 가로 및 세로 중심을 맞추려면

display:table-cell을 사용하세요.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			.demo{
				width: 400px;
		        height: 300px;
		        border: 1px dashed #000;
		        display: table-cell; /*主要是这个属性*/
		        vertical-align: middle;
		        text-align: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예)." / alt="CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예)." >
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

# 🎜🎜#

CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예). Instructions:

데모 상자에서 table-cell을 설정하면 데모 상자가 표 셀로 표시됩니다(비슷함). 및 로 설정하면 text-align: center;를 설정하면 img 이미지가 수평으로 중앙에 배치되고, Vertical-align: middle로 설정하면 img 이미지가 수직으로 중앙에 배치됩니다.

2. 유연한 레이아웃 플렉스

<!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;
		        display: flex;
		        justify-content: center;
		        align-items: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예)." / alt="CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예)." >
		</div>
	</body>
</html>

로그인 후 복사

렌더링:

# 🎜 🎜#지침: CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).

Set display: flex; flex elastic 레이아웃을 구현하려면 justify-content: center; 이미지를 중앙에 수평으로 정렬하려면 align-items: center; 중앙에 세로로 이미지가 표시됩니다.

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

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

위 내용은 CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!