이미지를 수평 및 수직으로 중앙에 배치하는 5가지 방법에 대한 자세한 그래픽 및 텍스트 설명(코드 포함)

페이지 레이아웃에서는 이미지 위치를 처리해야 하는 경우가 많습니다. 이 글에서는 주로 CSS를 사용하여 이미지의 가로 가운데 맞춤, 이미지의 가로 및 세로 가운데 맞춤을 구현하는 방법에 대해 설명합니다. . 이 강좌는 더욱 실용적입니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. center는 이미지의 수평 중앙 정렬을 구현합니다.

text-align은 일반적으로 텍스트의 수평 중앙 정렬에 사용되지만, 이미지에도 사용할 수 있습니다.

CSS 부분:

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

HTML 부분:

<div>
    <img  src="img/logo.png" / alt="이미지를 수평 및 수직으로 중앙에 배치하는 5가지 방법에 대한 자세한 그래픽 및 텍스트 설명(코드 포함)" >
</div>

Rendering:

2. line-height 및 text-align: 이미지의 가로 및 세로 중심을 맞추기 위한 중심

line-height 값을 다음과 동일하게 설정합니다. 높이를 사용하여 수직 센터링을 달성하고, text-align: center를 사용하여 수평 센터링을 달성할 수 있습니다. HTML 부분은 동일하며 CSS 코드는 다음과 같습니다:

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

Rendering:

3 디스플레이: 테이블 및 디스플레이: 테이블 셀은 이미지의 가로 및 세로 중심 맞추기

사용 display: table, display: table-cell을 설정하는 table 메소드이지만 이 메소드는 IE6/IE7과 호환되지 않습니다. IE67을 지원할 필요가 없으면 이 메소드를 사용할 수 있습니다

Css 스타일은 태그에 직접 작성됩니다.

<div   style="max-width:90%">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="img/logo.png"  / alt="이미지를 수평 및 수직으로 중앙에 배치하는 5가지 방법에 대한 자세한 그래픽 및 텍스트 설명(코드 포함)" >
    </span>
</div>

4. 위치는 그림 수준의 수직 중심을 달성합니다

위치 지정 방법: 부모 상자에 상대 위치 지정, 소위 부모 상대 자식 절대 위치를 자식 상자에 설정합니다. . 그림 위치의 왼쪽을 50%로 설정하고 위쪽을 50%로 설정합니다(참고: 수직으로 중앙에 위치하지 않음). 또한 margin-left를 그림 길이의 절반으로 설정하고 margin-top을 절반으로 설정해야 합니다. 그림의 높이. HTML 부분은 동일하며 CSS 코드는 다음과 같습니다.

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

5. 배경 배경은 그림의 수평 및 수직 중심을 구현합니다.

배경을 사용하여 수평 및 수직을 구현합니다. 사진 중심 맞추기

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

요약: 위에서는 사진 중심 맞추기 방법을 소개합니다. 5가지 방법이 있는데, 구체적인 사용 방법은 개인 습관과 작업 요구 사항에 따라 다릅니다. 도와주세요!

위 내용은 이미지를 수평 및 수직으로 중앙에 배치하는 5가지 방법에 대한 자세한 그래픽 및 텍스트 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!