방법: 1. 사진 요소의 상위 요소에 상대 위치 지정 스타일을 추가하고 사진 요소에 절대 위치 지정 스타일을 추가합니다. 2. 상단 속성과 "margin-top" 속성을 사용하여 사진이 수직 중앙에 위치하도록 설정합니다. . 사진 요소에 "top"을 추가하면 됩니다. :50%;margin-top:top margin value;" 스타일이면 충분합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css로 사진을 수직 중앙에 맞추는 방법
절대 위치 지정을 사용하여 수직 중앙 정렬을 구현합니다.
1 img의 상위 요소에 상대 위치 지정 속성(위치: 상대)을 추가하고 동시에 이미지 img 요소인 하위 요소에 상대 위치 지정 속성(위치: 상대)을 추가합니다. 절대 위치 지정 속성(위치: 절대)을 추가합니다.
2. 이미지 요소의 상단 속성을 50%로 설정합니다.
3. 이제 img 요소에 대해 음수 margin-top 값을 설정해야 합니다. 이 값은 수직 중심에 맞추려는 요소 높이의 절반입니다. margin-top을 사용할 수 없습니다. 변환:translateY(-50%);
기억하세요: 수평 센터링을 동시에 달성하려면 수직 센터링에 동일한 기술을 사용할 수 있습니다.
예제는 다음과 같습니다.
<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS를 사용하여 사진을 세로로 가운데에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
