CSS3에서 이미지를 중앙에 배치하는 데 사용할 수 있는 요소는 무엇인가요?-CSS 튜토리얼-php.cn

CSS3에서 이미지를 중앙에 배치하는 데 사용할 수 있는 요소는 무엇인가요?

王林

풀어 주다： 2020-11-12 09:12:40

원래의

1511명이 탐색했습니다.

CSS3에서는 [align-items:center] 요소와 [justify-content:center] 요소를 사용하여 이미지를 중앙에 배치할 수 있습니다. align-items 속성은 Flex 컨테이너의 현재 행의 세로 축을 따라 Flex 항목의 정렬을 정의합니다.

CSS3에서 이미지를 중앙에 배치하는 데 사용할 수 있는 요소는 무엇인가요?

방법:

align-items:center(세로 가운데 맞춤) 및 justify-content:center(가로 가운데 맞춤) 두 가지 속성을 사용하세요.

align-items 속성은 Flex 컨테이너의 현재 행의 세로 축 방향으로 Flex 항목의 정렬을 정의합니다.

(학습 동영상 추천: css 동영상 튜토리얼)

html:

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

로그인 후 복사

css:

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

로그인 후 복사

절대 위치 지정 + 여백을 사용하여 이를 달성할 수도 있습니다.

이미지는 외부 레이어를 기준으로 부동하고 여백: auto

HTML:

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

로그인 후 복사

CSS:

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

로그인 후 복사