CSS를 사용하여 이미지를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 이미지를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?

伊谢尔伦

풀어 주다： 2017-07-20 09:15:59

원래의

1426명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!