CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).
- 青灯夜游원래의
- 2018-10-19 11:10:4170550검색
프런트엔드 페이지를 개발할 때 페이지를 아름답게 만들기 위해 이미지가 중앙에 배치됩니다. 그렇다면 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: # 🎜🎜#
Instructions:
데모 상자에서 table-cell을 설정하면 데모 상자가 표 셀로 표시됩니다(비슷함).
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의 표시 속성을 이미지 중앙에 사용하는 두 가지 방법에 대한 완전한 소개입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면
CSS3 비디오 튜토리얼
위 내용은 CSS로 img 이미지를 중앙에 배치하는 방법은 무엇입니까? CSS의 표시 속성은 이미지 센터링을 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!