"/> ">
Css 이미지는 수평으로 중앙에 배치됩니다.
이미지 중앙 정렬을 달성하려면 margin: 0 auto를 사용하여 다음과 같이 이미지에 CSS 스타일 margin: 0 auto를 추가합니다.
<p style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="jgylogo3.gif" style="margin: 0 auto;" /> </p>
텍스트의 수평 중앙 정렬 속성을 사용합니다. text-align: center
<p style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="jgylogo3.gif" style="display: inline-block;" /> </p>
CSS 이미지는 수직 중앙에 있습니다.
그림을 수직 중앙에 맞추려면 높이 == 행 높이를 사용하세요.
이 방법은 높이를 아는 경우에만 사용할 수 있습니다. 코드는 다음과 같습니다.
<p style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;"> <img alt="" src="jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /> </p>
테이블을 사용하여 그림을 수직 중앙에 맞추세요
테이블을 사용하는 방법은 테이블 속성의 수직 중앙 정렬을 사용하는 것입니다. 코드는 다음과 같습니다.
여기에서는 디스플레이: 테이블 및 디스플레이: 테이블-셀을 사용하여 테이블을 시뮬레이션합니다. .IE67은 디스플레이: 테이블을 지원하지 않습니다. IE67을 지원할 필요가 없다면 다음을 수행할 수 있습니다.
단점: 디스플레이: 테이블을 설정하면 원본 레이아웃이 변경될 수 있습니다.
<p style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;"> <span style="display: table-cell; vertical-align: middle; "> <img alt="" src="jgylogo3.gif" style="display: inline-block;" /> </span> </p>
절대 위치 지정을 사용하여 이미지를 수직으로 가운데에 배치합니다.
이미지의 너비와 높이를 알면 코드는 다음과 같습니다.
<p style="width: 500px;height:200px; position: relative; border: green solid 1px;"> <img alt="" src="jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /> </p>
모바일 단말기는 플렉스 레이아웃을 사용하여 CSS 이미지의 수직 중앙 정렬을 구현할 수 있습니다.
모바일 단말기의 일반 브라우저 버전은 상대적으로 높기 때문에. flex 레이아웃을 과감하게 사용하실 수 있습니다. (flex 레이아웃은 css3의 flex 레이아웃 사용법을 참고하세요.) 데모 코드는 다음과 같습니다.
css代码: <style type="text/css"> .ui-flex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before { box-sizing: border-box } .ui-flex.justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .ui-flex.center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } </style> html代码: <p class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;"> <p class="cell"> <img alt="" src="jgylogo3.gif" style="" /> </p> </p>
위 내용은 CSS를 사용하여 이미지를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!