CSS 텍스트를 세로로 가운데에 맞추는 방법-프런트엔드 Q&A-php.cn

CSS 텍스트를 세로로 가운데에 맞추는 방법

藏色散人

풀어 주다： 2023-01-05 16:12:38

원래의

48039명이 탐색했습니다.

CSS에서 텍스트를 수직으로 가운데에 맞추는 방법: 1. line-height 속성을 사용하여 텍스트를 수직으로 가운데에 배치합니다. 2. 외부 블록을 테이블 셀에 서식 지정합니다. 3. CSS3 flex 레이아웃을 통해 텍스트를 수직으로 가운데에 배치합니다.

CSS 텍스트를 세로로 가운데에 맞추는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

방법:

방법 1: line-height 속성을 사용하여 텍스트를 세로로 가운데에 배치합니다.

line-height 속성은 줄 사이의 거리(줄 높이)를 설정합니다. 이 속성에는 음수 값이 허용되지 않습니다.

line-height 속성은 줄 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.

줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                background: #ddd;
                line-height:300px;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字</div>
    </body>
</html>

로그인 후 복사

렌더링:

CSS 텍스트를 세로로 가운데에 맞추는 방법

방법 2: 외부 블록을 표 셀로 서식 지정

표 셀의 내용을 수직으로 가운데 정렬할 수 있습니다. 외부 블록을 표 셀로 서식 지정하면 텍스트를 수직으로 가운데 정렬할 수 있습니다.

예: 특정 높이를 가진 블록 안에 단락 배치

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 400px;
                height: 200px;
                background: #ddd;
display: table-cell;
vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字</div>
    </body>
</html>

로그인 후 복사

렌더링:

CSS 텍스트를 세로로 가운데에 맞추는 방법

방법 3: CSS3의 플렉스 레이아웃을 사용하여 텍스트를 세로로 가운데에 배치

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 200px;
                background: #ddd;
                 /*设置为伸缩容器*/
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                /*垂直居中*/
                -webkit-box-align: center;/*旧版本*/
                -moz-box-align: center;/*旧版本*/
                -ms-flex-align: center;/*混合版本*/
                -webkit-align-items: center;/*新版本*/
                align-items: center;/*新版本*/
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中--文本文字（弹性布局）</div>
    </body>
</html>

로그인 후 복사

렌더링:

CSS 텍스트를 세로로 가운데에 맞추는 방법