이 글에서는 여러 줄의 텍스트를 세로로 가운데 맞추는 방법을 비롯해 CSS 튜토리얼에서 p를 세로로 가운데 맞추는 다양한 방법을 주로 자세히 소개하고 있습니다. 관심 있는 친구들은
에서 이야기하고 있는 내용을 참고하시면 됩니다. 이 질문에 어떤 사람들은 CSS에 수직 중앙 정렬을 설정하기 위해 vertical-align 속성 이 있는지 물어볼 수 있습니다. 일부 브라우저가 지원하지 않더라도 약간의 CSS Hack 기술만 하면 됩니다! 여기서 몇 마디 말씀드리자면 CSS에는 실제로 수직 정렬 속성이 있지만 (X)HTML 요소에 valign 속성이 있는 요소(예: <)에만 적용됩니다. ;td>,
, 과 같은 요소에는 valign 속성이 없으므로 수직 정렬을 사용할 수 없습니다.
1. 한 줄 세로 가운데 정렬
컨테이너에 텍스트가 한 줄만 있는 경우 가운데 정렬만 하면 비교적 간단합니다. 실제 높이 높이는 줄의 높이 line-height와 같을 수 있습니다.
예:
p {
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;}
p {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<p>现在我们要使这段文字垂直居中显示！</p>
</body>
</html>2. 높이를 알 수 없는 여러 줄 텍스트의 세로 중앙 정렬
콘텐츠의 경우 높이는 조정 가능합니다. 그런 다음 이전 섹션에서 언급한 수평 센터링을 달성하는 데 사용된 마지막 방법을 사용할 수 있습니다. 이는 위쪽 및 아래쪽 패딩 값이 동일하도록 Padding을 설정하는 것입니다. 다시 말하지만, 이것은 수직 중심을 "보는" 방법이며 텍스트가
를 완전히 채우도록 만드는 방법일 뿐입니다. 다음과 유사한 코드를 사용할 수 있습니다.
p {
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;}
p {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
p {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}