CSS에서 이미지를 중앙에 배치하는 코드를 작성하는 방법-CSS 튜토리얼-php.cn

CSS에서 다음 코드를 사용하여 이미지를 수평으로 중앙에 배치할 수 있습니다. 컨테이너 요소 text-align: center;를 설정합니다. 이미지를 인라인 블록 수준 요소 표시(inline-block;)로 설정합니다. 이미지를 수직으로 중앙에 배치합니다. 수직 정렬: 중간;. 이미지를 수직으로 중앙에 배치: 컨테이너 요소를 flexbox 표시: flex;로 설정합니다. 하위 요소를 수직으로 가운데 정렬합니다. 항목: 가운데;. 하위 요소를 수평으로 가운데에 배치합니다. justify-content: center;. 이미지 크기 제한 최대 너비: 100%;, 최대 높이:

CSS에서 이미지를 중앙에 배치하는 코드를 작성하는 방법

CSS

에서 이미지를 중앙에 배치하기 위한 코드:CSS 코드를 사용하여 요소에서 이미지를 수평 및 수직으로 중앙에 배치하는 방법은 무엇입니까?

답변:

수평 중심

.image-container { text-align: center; } .image { display: inline-block; vertical-align: middle; }

로그인 후 복사

수직 중심

.image-container { display: flex; align-items: center; justify-content: center; } .image { max-width: 100%; max-height: 100%; }

로그인 후 복사

세부 정보:

수평 중심

text-align: center; code>는 image-container요소는 가로 중앙에 배치되도록 설정됩니다.text-align: center;将image-container元素设置为水平居中。


        display: inline-block;将image元素设为内联块级元素，允许它与文本对齐。
        vertical-align: middle;将image元素在垂直方向上居中，与 surrounding text 对齐。


       垂直居中
       
        display: flex;将image-container元素设为 flexbox，允许对其子元素进行灵活布局。
        align-items: center;将image-container元素中的所有子元素在垂直方向上居中。
        justify-content: center;将image-container元素中的所有子元素在水平方向上居中。
        max-width: 100%;和max-height: 100%;限制image元素的大小，使其适应image-container
        display: inline-block;
        image요소를 인라인 블록 수준 요소로 만들어 텍스트와 정렬할 수 있도록 합니다.
       
       vertical-align: middle;
       image요소를 수직으로 중앙에 배치하고 주변 텍스트에 맞춰 정렬합니다. 세로 중심
       display: flex;
       image-container요소를 flexbox로 설정하여 해당 하위 요소의 유연한 레이아웃을 허용합니다.
       align-items: center;
       image-container요소의 모든 하위 요소를 수직으로 중앙에 배치합니다.
       justify-content: center;
       image-container요소의 모든 하위 요소를 가로 중앙에 배치합니다.
       max-width: 100%;및
       max-height: 100%;는
       image요소의 크기를 제한하여 크기에 맞도록 합니다.
       가로 세로 비율을 유지하면서 이미지 컨테이너요소의 크기입니다.
       위 내용은 CSS에서 이미지를 중앙에 배치하는 코드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!