CSS를 사용하여 div의 이미지를 세로 중앙에 배치하는 방법

이 글에서는 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

#🎜🎜 # 디스플레이의 세 가지 속성을 사용합니다: table-cell-align: middle; 🎜#display:table-cell: 테이블 셀로 표시됩니다(b6c5a531a458a2e790c1fd6421739d1c 및 b4d429308760b6c2d20d6300079ed38e와 유사)

vertical-align: middle; level elements

text-align: center: 수평 정렬을 설정합니다. 이 속성은 라인 상자가 정렬되는 지점을 지정하여 블록 수준 요소 내에서 텍스트의 수평 정렬을 설정합니다.

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를 사용하여

이 방법에서는 margin-top 및 margin-left 값 설정에 주의하세요. 요소의 높이와 너비를 절반으로 줄이고 음수 값을 취합니다.

예를 들어 margin-top: -40px는 요소가 위쪽 테두리에서 40px 위쪽에 있음을 의미하고 margin-top: 40px는 거리가 위쪽임을 의미합니다. 테두리 요소는 아래쪽으로 40px입니다.

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

}

Rendering

Summary: 사용 CSS를 사용하여 div에 이미지를 배치하는 방법에는 여러 가지가 있습니다. 위에 요약한 세 가지 방법이 있습니다. 나머지 부분도 페이지 레이아웃을 배우는 데 도움이 되기를 바랍니다.

위 내용은 CSS를 사용하여 div의 이미지를 세로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!