CSS에서 div를 세로 중앙에 설정하는 방법
- coldplay.xixi원래의
- 2021-04-29 11:09:574480검색
CSS를 사용하여 div의 수직 중심을 설정하는 방법: 1. 실제 높이를 행의 높이와 동일하게 설정합니다. [line-height] 2. 위쪽 및 아래쪽 패딩 값이 되도록 패딩을 설정합니다. 동일합니다.
이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.
div 수직 센터링을 설정하는 Css 방법:
1. 한 줄 수직 센터링
컨테이너에 텍스트 줄이 하나만 있는 경우 센터링만 설정하면 비교적 간단합니다. 실제 높이 및 위치 행 높이의 선 높이는 동일할 수 있습니다.
예:
div {
height:25px;
line-height:25px;
overflow:hidden;
}이 코드는 매우 간단합니다. Overflow:hidden 설정은 나중에 내용이 컨테이너를 초과하는 것을 방지하거나 자동으로 줄 바꿈을 수행하여 수직 중앙 정렬 효과를 얻을 수 없도록 하는 데 사용됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>2. 높이를 알 수 없는 여러 줄 텍스트의 세로 가운데 맞춤
콘텐츠의 높이가 가변적인 경우 이전 섹션에서 언급한 가로 가운데 맞춤을 달성하는 데 사용된 마지막 방법을 사용할 수 있습니다. 상하 패딩 값이 동일하도록 패딩합니다. 다시 말하지만, 이것은 수직 중심을 "보는" 방법이며 텍스트가 dc6dce4a544fdca2df29d5ac0ea9906b를 완전히 채우도록 만드는 방법일 뿐입니다. 다음과 유사한 코드를 사용할 수 있습니다.
div {
padding:25px;
}이 방법의 장점은 모든 브라우저에서 실행할 수 있다는 점이며 코드도 매우 간단하지만 이 방법을 적용하기 위한 전제 조건은 컨테이너의 높이가 확장 가능합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><br> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！