집 > 기사 > 웹 프론트엔드 > CSS에서 텍스트 중심 정렬을 설정하는 방법

CSS에서 텍스트 중심 정렬을 설정하는 방법

青灯夜游원래의: 2021-09-09 18:28:1711583검색

방법: 1. "text-align:center" 또는 "margin:0 auto"를 사용하여 수평 중앙 정렬을 설정합니다. 2. "line-height:value" 또는 "display:table-cell;vertical-align:middle"을 사용합니다. " 수직 중앙 정렬을 설정합니다.

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

1. 가로 가운데 맞춤:

(1) 인라인 요소의 가로 가운데 맞춤?

설정된 요소가 텍스트, 그림 등인 경우 인라인 요소, 상위 요소에 text-align:center를 설정하여 인라인 요소를 가로로 가운데에 배치하고 하위 요소의 표시를 인라인으로 설정합니다. 하위 요소가 인라인 요소가 되도록 차단

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2) 블록 요소의 가로 가운데 맞춤(고정 너비)

요소가 고정 너비 블록 수준 요소로 설정된 경우, 텍스트 사용- 정렬: 가운데가 작동하지 않습니다. "왼쪽 및 오른쪽 여백" 값을 "자동"으로 설정하면 가운데 정렬이 가능합니다.

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

.child{
  width: 200px;
  margin: 0 auto;
}

(3)블록 요소의 수평 중심 배치(폭 무한)

실제 작업에서는 페이징과 같이 "가변 폭을 가진 블록 수준 요소"에 대한 중심 배치를 설정해야 할 필요성에 직면하게 됩니다. 웹 페이지 탐색은 페이지 매김 수가 불확실하므로 너비를 설정하여 유연성을 제한할 수 없습니다.

이를 달성하기 위해 text-align:center를 가변 너비의 블록 수준 요소로 직접 설정하거나 text-align:center를 상위 요소에 추가하여 중심화 효과를 얻을 수 있습니다.

가변 너비 블록 수준 요소의 너비가 한 줄을 차지하지 않는 경우 표시를 인라인 유형 또는 인라인 블록으로 설정할 수 있습니다(인라인 요소 표시 또는 인라인 블록 요소로 설정)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

2. 수직 센터링:

가로 센터링과 동일합니다. 여기서는 먼저 두 가지 조건을 설정합니다. 상위 요소는 상자 컨테이너이고 높이가 설정되었습니다

시나리오 1: 하위 요소는 인라인 요소이고 높이는 내용이 늘어남에 따라 결정됩니다.

이 경우 하위 요소를 세로로 가운데에 배치하려면 상위 요소의 줄 높이를 높이로 설정해야 합니다.

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

시나리오 2:

하위 요소는 블록 수준 요소이지만 하위 요소의 높이는 설정되지 않습니다. 이 경우 하위 요소의 높이는 실제로 알 수 없으며 패딩이나 여백을 계산하여 조정할 수 없습니다. , 그러나 여전히 몇 가지 해결책이 있습니다. display:table-cell;vertical-align:middle을 상위 요소로 설정하여 문제를 해결하세요

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

Result

시나리오 3: 하위 요소가 블록 수준 요소이고 높이가 설정되었습니다

자식 계산 요소의 여백 상단 또는 여백 하단, 계산 방법은 상위(요소 높이 - 하위 요소 높이)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

Result

CSS에서 텍스트 중심 정렬을 설정하는 방법

1. 가로 가운데 맞춤:

2. 수직 센터링:

관련 기사