CSS에서 텍스트를 가운데에 배치하는 방법은 무엇입니까? CSS 텍스트의 세로 가운데 맞춤을 설정하는 방법

웹 디자인 과정에서 때로는 아름다운 레이아웃을 위해 텍스트를 중앙에 배치해야 할 수도 있습니다. 그렇다면 텍스트를 중앙에 배치하는 방법은 무엇입니까? 이 글에서는 css에서 텍스트의 세로 중앙 정렬을 설정하는 방법을 소개합니다.

우선 CSS를 통해 요소의 수평 중심을 맞추는 것이 비교적 간단하다는 점을 알아야 합니다. 텍스트의 경우 상위 요소에 text-align: center를 설정하고 블록 수준 요소의 경우에만 설정하면 됩니다. div의 경우 왼쪽 및 오른쪽 여백만 설정하면 됩니다. 요소를 수직으로 가운데에 맞추려면 값이 auto입니다. 일부 사람들은 CSS의 수직 정렬 속성을 생각하지만 valign 속성이 있는 요소에만 적용됩니다. . 그럼 다음으로는 CSS에서 단일 텍스트의 세로 센터링과 여러 텍스트의 세로 센터링을 구현하는 방법을 살펴보겠습니다.

먼저 CSS에서 한 줄 텍스트의 세로 중심 정렬을 살펴보겠습니다.

한 줄 텍스트의 경우 텍스트 줄 높이(line-height)와 높이(height)만 설정하면 됩니다. 일관성을 유지해야 하는 영역입니다.

Css 한 줄 텍스트 세로 가운데 맞춤 구현 코드:

HTML:

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS

:

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

css 한 줄 텍스트 세로 가운데 맞춤 효과는 다음과 같습니다.

그렇다면 와서 여러 줄 텍스트의 세로 중심 맞춤을 살펴보세요

설명: 여러 줄 텍스트의 세로 중심 맞춤에는 두 가지 경우가 있습니다. 하나는 상위 요소의 높이가 고정되지 않고 내용에 따라 변경된다는 것입니다. 다른 하나는 상위 요소의 높이가 고정되어 있다는 것입니다.

1. 부모 요소의 높이가 고정되어 있지 않습니다

부모 요소의 높이가 고정되어 있지 않으면 내부 텍스트로만 높이를 확장할 수 있습니다. 따라서 padding 값을 설정하여 텍스트가 수직 중앙에 표시되도록 할 수 있습니다. padding-top 및 padding-bottom 값을 동일하게 설정하면 됩니다:

css 여러 줄 텍스트 수직 중앙 정렬 코드:

HTML :

  <div id="div1">
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中。
    </div>

CSS:

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

CSS에서 여러 줄 텍스트의 수직 중앙 정렬 효과는 다음과 같습니다.

2상위 요소의 높이는 고정됩니다

수직 정렬. CSS의 속성에는 valign 속성만 있습니다. 요소는 display: table;과 결합되어 테이블 속성을 시뮬레이션하도록 만들 수 있습니다. 따라서 상위 div: display: table;;의 표시 속성을 설정한 다음 텍스트 콘텐츠가 포함된 div를 추가하고 해당 표시: table-cell 및 Vertical-align: middle을 설정할 수 있습니다.

css 여러 줄 텍스트 세로 가운데 맞춤 코드:

HTML:

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS:

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

css 여러 줄 텍스트 세로 가운데 맞춤 효과는 다음과 같습니다.

이 글은 여기에서 끝납니다. , 사실, 제가 하나씩 소개하지 않을 다른 방법도 있습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트를 참고하세요.

위 내용은 CSS에서 텍스트를 가운데에 배치하는 방법은 무엇입니까? CSS 텍스트의 세로 가운데 맞춤을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!