CSS에서 이미지를 중앙에 배치하는 방법은 무엇입니까

CSS 이미지를 중앙에 배치하는 방법: 1. "text-align: center;" 스타일을 사용합니다. 3. 유연한 상자 레이아웃을 사용합니다. 절대 위치 지정에서 정렬을 사용합니다. 6. 배경 속성을 사용하여 배경 이미지를 중앙에 배치합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

html

 <div id="pic">
        <img src=star.jpg class="logo">
 </div>

1. (가장 간단) 텍스트 속성 정렬 text-align

text-align은 요소의 텍스트 줄 정렬을 제어합니다. img에서 상위 div를 설정하여 img가 div의 텍스트가 될 수 있도록 한 다음 text-align을 사용하여 div 속성을 수정할 수 있습니다. (상위 요소에 속성 추가)

Note: 하위 요소는 inline 또는 inline-block이어야 합니다. 하위 요소도 div인 경우 하위 요소에 대해 display: inline/inline-block을 설정해야 합니다. 여기서 하위 요소 img는 인라인이므로 이 단계를 생략합니다. 이 방법은 인라인 요소에 적합합니다. 예를 들어 img

css

#pic {
    text-align: center;   /*表示div的子元素居中*/
}

2. 여백을 능숙하게 사용하세요

css

img {
    display: block;    
    width: 100px;
    margin: 0 auto;
}

위의 세 가지 사항은 필수입니다.

margin: 0 auto; 중앙 정렬 의 전제 조건은 다음과 같습니다.

• 인라인 요소는 디스플레이로 설정되어야 합니다: img는 인라인 요소로 설정되어야 합니다. 입력된 경우에는 설정할 필요가 없습니다.

• 요소에는 너비가 있어야 합니다. 단, 버튼과 입력처럼 기본 제공 너비가 있는 요소는 제외됩니다.

전제에 따르면 또 다른 방법이 있습니다. 즉 상위 요소의 속성을 수정하는 것입니다.

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

요약하자면 이 방법은 블록 요소에 적합합니다. 예를 들어 div 및 입력의 센터링

여백 제한: 두 개의 이미지가 한 줄에 표시되는 경우 이에 따라 여백을 수정해야 합니다.

3. 유연한 상자 레이아웃

css

#pic {
    display: flex;   
    justify-content: center;
    }

유연한 상자 레이아웃은 몇 줄의 CSS를 사용하여 거의 모든 레이아웃을 구현할 수 있습니다. 그리고 가장 놀라운 점은 사진의 레이아웃과 위치를 고려하지 않고도 n개의 사진 중 상위 2줄도 중앙에 맞출 수 있다는 것입니다.

4. 그리드 레이아웃

플렉시블 상자는 탐색 모음에서 가장 일반적으로 사용됩니다. 대조적으로, 그리드 레이아웃은 보편적인 레이아웃 시스템입니다.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

그래서 여러 장의 사진을 정렬하는 문제를 매우 편리하게 처리할 수 있습니다.

5. 절대 위치 정렬

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

두 번째 방법과 가장 큰 차이점은 여백을 블록 요소에 사용한다는 것입니다. 위치를 사용하면 블록을 설정할 필요가 없습니다. 그러나 위치는 일반적으로 프레임 레이아웃에서 사용됩니다. 단지 그림을 중앙에 배치하는 것이라면 과도하고 번거롭습니다. 권장되지 않습니다.

6. 배경 이미지가 중앙에 위치합니다.

html

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

전제 조건: 요소 콘텐츠가 비어 있는 한 높이를 설정해야 합니다. div 내용이 비어 있으므로 높이를 설정해야 합니다. 그렇지 않으면 div에 공간이 없어 배경 이미지가 표시되지 않습니다. 신체라면 필요하지 않습니다. 신체에는 고유한 높이가 있기 때문입니다.

배경 이미지로 설정의 한계는 하이퍼링크, 제목, Alt 등 이미지의 속성을 설정할 수 없다는 점입니다. 배경 이미지가 아닌 경우에는 이 형식을 사용하지 마세요.

(학습 영상 공유:

css 영상 튜토리얼)

위 내용은 CSS에서 이미지를 중앙에 배치하는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!