수직 센터링을 달성하기 위해 display:table-cell을 사용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

수직 센터링을 달성하기 위해 display:table-cell을 사용하는 방법은 무엇입니까?

不言

풀어 주다： 2018-10-24 15:26:25

원래의

5146명이 탐색했습니다.

웹 페이지 레이아웃에서는 그림이나 텍스트를 세로로 가운데에 배치해야 하는 경우가 많습니다. 오늘은 display:table-cell 속성을 사용하여 세로로 가운데를 맞추는 방법을 살펴보겠습니다. 자세한 내용은 아래에 있습니다.

먼저 display:table-cell 속성

에 대해 간단히 알아보겠습니다. display:table-cell 속성을 사용하면 td 라벨과 유사하게 라벨 요소를 테이블 셀 형태로 표시할 수 있습니다. :table-cell 크기를 조정하려면 고정 요소를 세로 중앙에 배치합니다.

다음으로 display:table-cell의 수직 센터링을 구현하는 구체적인 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
        .img{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 200px;
            height: 300px;
            border: 1px solid lightgreen;
            background-color: lightblue;
        }
        .text{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 300px;
            border: 1px solid lightgreen;
            padding: 10px;
             background-color: lightblue;
        }
</style>
</head>
<body>
<div>
        <div>
            <img src="image/girl.jpg" width="80px" height="100px" alt="">
        </div>
        <div>
            <p>php中文网在线免费教程 </p>
        </div>
    </div>
</body>
</html>

로그인 후 복사

display:table-cell은 다음과 같이 수직 센터링을 구현합니다.

수직 센터링을 달성하기 위해 display:table-cell을 사용하는 방법은 무엇입니까?