CSS 텍스트를 세로로 가운데에 맞추는 방법
- 藏色散人원래의
- 2021-04-29 09:15:5047985검색
CSS에서 텍스트를 수직으로 가운데에 맞추는 방법: 1. line-height 속성을 사용하여 텍스트를 수직으로 가운데에 배치합니다. 2. 외부 블록을 테이블 셀에 서식 지정합니다. 3. CSS3 flex 레이아웃을 통해 텍스트를 수직으로 가운데에 배치합니다.
이 기사의 운영 환경: 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>렌더링:
방법 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>렌더링:
방법 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>렌더링:
더 자세한 HTML/ CSS 지식은 CSS Video Tutorial 칼럼을 방문해주세요!
위 내용은 CSS 텍스트를 세로로 가운데에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!