중앙 정렬 방법: 1. 상자의 상대 위치와 그림의 절대 위치를 설정한 다음 그림의 위치를 조정합니다. 2. img 이미지 요소를 블록 수준 요소로 설정한 다음 table-cell 및 "vertical-align:middle;"을 사용하여 중앙에 배치합니다. 3. Flexbox 레이아웃을 사용하여 중앙에 배치합니다.
이 튜토리얼의 운영 환경: 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>렌더링:
두 번째 방법: 다음의 새 속성 테이블을 사용합니다. 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 비디오 튜토리얼 ]
세 번째 방법: 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>효과:
네 번째 방법: 변환 속성 사용(단점: 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 상자에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
