Div의 수직 센터링 효과를 얻는 방법-HTML 지식-php.cn

집

일일 프로그램

HTML 지식

Div의 수직 센터링 효과를 얻는 방법

藏色散人

Nov 09, 2018 pm 03:52 PM

이 글에서는 주로 div의 수직 중심 정렬을 달성하는 방법을 소개합니다.

웹 디자인에서 다양한 div 중심 레이아웃은 HTML/CSS 초보자가 마스터해야 할 가장 기본적인 지식이자 기술입니다. div 수평 센터링 효과이전 글에서도 소개한 바 있는데, 초보 친구들이라면 이미 마스터했을 거에요.

이제 계속해서 간단한 예제를 사용하여 div 콘텐츠 수직 중앙 정렬 구현 방법을 소개하겠습니다.

추천 참고 공부: "html tutorial"

div 수직 센터링 코드예는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div垂直居中</title>
</head>
<body>
<div style="line-height: 500px;height: 500px;width: 500px;  background: red;">
    PHP中文网
</div>
</body>
</html>

로그인 후 복사

프론트 엔드 효과는 다음과 같습니다:

Div의 수직 센터링 효과를 얻는 방법

그림과 같이 , div의 텍스트는 세로 중앙에 있습니다. 주요 속성은 line-height입니다.
line-height 속성은 줄 사이의 거리를 설정합니다(줄 높이는 세로 방향입니다).

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

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

설정된 높이를 500px에서 200px로 변경하면 렌더링 효과는 다음과 같습니다.

Div의 수직 센터링 효과를 얻는 방법