이미지용 CSS div 센터링 코드를 작성하는 방법
- 藏色散人원래의
- 2021-01-04 10:22:022932검색
이미지 CSS div 센터링 코드 작성 방법: 먼저 표시를 table-cell로 설정한 다음 가로 센터링을 텍스트 정렬을 가운데로 설정하고 마지막으로 세로 센터링을 세로 정렬을 가운데로 설정합니다.
이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, HTML5&&CSS3 버전.
권장: "css 비디오 튜토리얼"
몸 구조
<body> <div> <img src="1.jpg" alt="haha"> </div> </body>
방법 1:
디스플레이를 테이블 셀로 설정한 다음 텍스트 정렬을 가운데로 설정하여 수평 중앙에 맞추고 수직 정렬을 가운데로 설정하여 수직 중앙에 놓습니다. .
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>결과는 아래 그림과 같습니다.
방법 2:
위치 위치 지정을 통해 달성. div를 상대 위치로 설정하고, img를 절대 위치로 설정합니다. 왼쪽: 50%, 위쪽: 50% 이때 이미지의 왼쪽 상단이 div의 중앙에 위치합니다. 이미지가 div 중앙에 있으므로 이미지를 이동해야 합니다. 이미지 높이의 절반은 위로 이동하고 너비의 절반은 왼쪽으로 이동합니다.
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>결과는 아래 그림과 같습니다.
방법 3: 그림이나 요소의 실제 너비와 높이가 명확하지 않을 때 사용할 수 있습니다
또는 위치 지정을 통해 얻을 수 있습니다. div를 상대 위치로 설정하고, img를 절대 위치로 설정합니다. 왼쪽: 50%, 위쪽: 50% 이때 이미지의 왼쪽 상단이 div의 중앙에 위치합니다. 이미지가 div 중앙에 있으므로 이미지를 이동해야 합니다. 이미지 높이의 절반을 위로 이동하고 이미지 너비의 절반을 왼쪽으로 이동합니다. 요소의 너비와 높이를 모르는 경우 다음을 사용할 수 있습니다. 변환: 번역(-50%,-50%);
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>방법 4:
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>방법 5: 유연한 레이아웃 flex
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>효과는 동일합니다. 모두에게 도움이 되기를 바랍니다!
위 내용은 이미지용 CSS div 센터링 코드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!