페이지 레이아웃에서는 이미지 위치를 처리해야 하는 경우가 많습니다. 이 글에서는 주로 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="text-align: center; width: 400px;height:200px; display: table;border: green solid 1px;"> <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!