CSS 텍스트 및 div 수직 센터링 방법 예제 분석

스타일 레이아웃에서는 요소를 중앙에 배치해야 하는 경우가 종종 있습니다. CSS를 통해 요소의 수평 중심을 맞추는 것은 상대적으로 간단합니다. 텍스트의 경우 상위 요소에 대해 text-align: center만 설정하면 되고, p와 같은 블록 수준 요소의 경우에는 여백 값만 설정하면 됩니다. ​​​​왼쪽과 오른쪽이 자동입니다. 요소의 수직 중앙 정렬을 달성하기 위해 일부 사람들은 CSS의 수직 정렬 속성을 생각할 것이지만 이는

, , 등과 같은 valign 속성이 있는 요소에만 적용됩니다. 테이블 요소에 있고

및 과 같은 요소에는 valign 속성이 없으므로 수직 정렬을 사용할 수 없습니다. 따라서 요소의 수직 센터링을 달성하려면 다른 방법을 사용해야 합니다. 아래에서는 일반적으로 사용되는 몇 가지 수직 센터링 방법을 요약했습니다.

한 줄 텍스트는 세로 중앙에 배치됩니다

한 줄 텍스트의 경우 텍스트 줄 높이(line-height)와 영역 높이(높이)를 일관되게 유지하세요:

<!--html代码-->
    <p id="p1">
        这是单行文本垂直居中   
    </p>

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

여러 줄의 텍스트를 세로로 가운데 정렬

여러 줄의 텍스트가 세로로 가운데에 맞춰지는 경우에는 두 가지 상황이 있습니다. 하나는 상위 요소의 높이가 고정되지 않고 내용에 따라 변경되는 것이고, 다른 하나는 상위 요소의 높이가 고정되는 것입니다.

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

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

<!--html代码-->
    <p id="p1">
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中。   
    </p>

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

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

CSS의 수직 정렬 속성은 이 글의 시작 부분에서 언급되었지만 valign 속성이 있는 요소에만 적용됩니다. 테이블 속성을 시뮬레이션합니다. 따라서 상위 p: display: table;;의 디스플레이 속성을 설정한 다음 텍스트 콘텐츠를 포함하는 p를 추가하고 해당 디스플레이: table-cell; 및 수직 정렬: middle;을 설정할 수 있습니다. 구체적인 코드는 다음과 같습니다.

<!--html代码-->
    <p id="outer">
        <p id="middle">
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中。   
        </p>
    </p>

/*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%;      
        }

단, IE7에서의 표시 효과는 다음과 같습니다.

IE7 이하 버전에서는 display:table 및 display:table-cell 속성을 잘 지원하지 않기 때문입니다. 물론 브라우저를 고려하지 않는다면요. IE7 이하에서는 위의 방법으로 수직 센터링을 달성할 수 있습니다. IE7 이하를 고려하면 CSS 해킹에 대한 지식을 활용하여 다양한 브라우저에 대한 속성을 설정할 수 있습니다.

<!--html代码-->
    <p id="outer">
        <p id="middle">
            <p id="content">
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)。   
            </p>
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
            *position:relative;  //兼容IE7及以下版本   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;   
            *position:absolute;   //兼容IE7及以下版本   
            *top:50%;     
        }   
        #content {     
           *position:relative;  //兼容IE7及以下版本    
           *top:-50%;     
        }

하위 p가 수직 중앙에 위치함

1. 특정 항목에 따라 오프셋을 설정합니다. 하위 p의 크기

하위 p의 크기가 고정된 경우 가로 및 세로 오프셋을 상위 요소의 50%로 설정한 다음 하위 요소를 위쪽 왼쪽으로 크기의 절반만큼 이동합니다. 실제 길이에 따르면

아아아아

이 방법은 IE7, IE6에서만 호환되지만 sub-p의 크기가 고정된 경우에만 유효합니다. 대부분의 경우 sub-p의 크기가 고정되어 있지 않습니다. 다음은 sub-p의 크기가 고정되어 있지 않은 경우의 방법을 설명합니다. 디스플레이 효과는 기본적으로 이것과 동일하므로 렌더링은 하나씩 게시되지 않습니다. 독자는 코드를 복사하여 스스로 확인할 수 있습니다.

2. 번역 사용

첫 번째 방법에서 상위 요소의 가로, 세로 50% 오프셋 후 여백 값을 설정하지 않고 CSS3의 변환 속성을 사용하여 번역 값을 설정합니다. , CSS 코드 부분이 다음과 같이 변경됩니다.

<!--html代码-->
    <p id="outer">
        <p id="middle">
            子p(固定大小)垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
                background-color: #13CDF4;   
                width: 300px;   
                height: 200px;   
                position: relative;   
        }   
        #middle{    
                background-color: #E41627;   
                width: 100px;   
                height: 100px;   
                margin: auto;   
                position: absolute;   
                left: 50%;    
                top: 50%;   
                margin-left: -50px;   
                margin-top: -50px;   
        }

이 방법은 CSS3의 속성이라는 점에 주의해야 합니다. IE9 이전 버전은 지원되지 않습니다.

3. 절대 레이아웃 절대 사용

#middle{    
        background-color: #E41627;   
        width: 100px;   
        height: 100px;   
        margin: auto;   
        position: absolute;   
        left: 50%;    
        top: 50%;   
        transform: translateX(-50%) translateY(-50%);   
        -webkit-transform: translateX(-50%) translateY(-50%);   
    }

이 방법은 IE7 및 IE6과 호환되지 않습니다

4. 수직 정렬을 사용하세요

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用vertical-align属性实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: table-cell;    
            vertical-align: middle;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
            margin: 0 auto;   
        }

这种方法是将p转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的p垂直居中。这里我就不重述了。

5、利用display: flex

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用display: flex实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: flex;   
            justify-content: center;/*实现水平居中*/   
            align-items:center; /*实现垂直居中*/   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
        }

这种方法只需要在父级p中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。

위 내용은 CSS 텍스트 및 div 수직 센터링 방법 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!