이 글에서는 CSS를 사용하여 div에서 이미지를 세로로 가운데에 배치하는 방법을 주로 소개합니다. 이는 특정 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다. # 일반적으로 페이지를 만들 때 div 중간에 그림을 표시하라는 요청을 받았지만 어떻게 해야 할지 모르는 상황에 자주 직면합니다. 오늘은 수직 중앙 정렬을 위해 일반적으로 사용되는 몇 가지 CSS 코드를 공유하겠습니다. div의 사진 수#🎜🎜 #
HTML 코드
<div> <img src="images/1.jpg"> </div>
방법 1
사용 위치와 여백을 함께 달성하기#🎜 🎜#상위 요소의 절대 위치 속성을 설정하여 하위 요소는 div를 기준으로 위치를 지정합니다
relative는 원래 위치를 유지하는 것입니다. 원래 위치를 기준으로 배치 및 배치#🎜 🎜#absolute는 원래 위치에서 멀리 배치되고 가장 가까운 위치의 상위 요소를 기준으로 배치됩니다. 위치가 지정된 상위 요소가 없으면 문서를 기준으로 배치됩니다.
# 🎜🎜#참고:
하위 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽을 0으로 만들려면 margin: auto를 설정하면 자동으로 세로로 가운데에 맞춰집니다.# 🎜🎜#코드는 다음과 같습니다
div{ width:200px; height:200px; border: 1px solid #ccc; position: relative;//父元素设置绝对定位 } img{ position: absolute;//相对定位 width:80px; height:50px; top:0; left:0; right:0; bottom:0; margin:auto;//使其垂直居中 }
#🎜🎜 #방법 2
div{ width:200px; height: 200px; margin:300px auto; display: table-cell;//作为一个表格单元格显示 vertical-align: middle;//设置垂直对齐方式 text-align: center;//设置水平对其方式 border:1px solid #ccc; } img { width:80px; height:50px; }
3번째 방법
# 🎜 🎜#
위치, margin-top 및 margin-left를 사용하여
div{ width:200px; height:200px; border: 1px solid #ccc; position: relative; } img{ position: absolute; width:80px; height: 50px; top:50%; left:50%; margin-top: -40px;//向上40px margin-left: -25px;//向左25px }
Summary: 사용 CSS를 사용하여 div에 이미지를 배치하는 방법에는 여러 가지가 있습니다. 위에 요약한 세 가지 방법이 있습니다. 나머지 부분도 페이지 레이아웃을 배우는 데 도움이 되기를 바랍니다.
위 내용은 CSS를 사용하여 div의 이미지를 세로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!