하나 또는 여러 줄의 텍스트를 세로 중앙에 배치하는 CSS 예제

저자：Eve Cole 업데이트 시간：2009-05-31 01:04:45

테이블 레이아웃 시대에는 세로 중심에 대해 너무 많이 생각할 필요가 없습니다. 셀에서는 기본값이 세로 가운데에 있습니다. 텍스트 한 줄은 세로 가운데에 있고 세 줄의 텍스트도 세로 가운데에 있습니다. 양식이 변경되도록 CSS 웹 페이지 레이아웃을 수행합니다. 텍스트는 기본적으로 컨테이너 상단에 배치됩니다.

아래와 같이:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<스타일 유형="텍스트/css">
#미스터진 {
너비:500px;
높이:200px;
테두리:1px 솔리드 #03c;
텍스트 정렬:가운데;
}
</style>
</head>
<본문>
<div id="MrJin"><a href="http://www.52CSS.com/">CSS 웹 디자인</a></div>
</body>
</html>

이 경우 텍스트를 세로로 가운데에 배치하는 방법은 무엇입니까? 세 가지 상황으로 나누어집니다.

1. 한 줄의 텍스트인 경우 줄 간격을 사용하여 문제를 해결할 수 있습니다.

한 줄의 텍스트를 세로로 가운데에 맞추는 효과를 얻기 위해 줄 간격 정의를 추가합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<스타일 유형="텍스트/css">
#미스터진 {
너비:500px;
높이:200px;
테두리:1px 솔리드 #03c;
텍스트 정렬:가운데;
줄 높이:200px;
}
</style>
</head>
<본문>
<div id="MrJin"><a href="http://www.52CSS.com/">CSS 웹 디자인 </a></div>
</body>
</html>

2. 여러 줄의 텍스트인 경우 상위 컨테이너의 높이가 고정되어 있지 않습니다.

문제를 해결하기 위해 패딩을 사용할 수 있습니다.

컨테이너의 패딩을 동일한 고정값으로 설정하면 콘텐츠가 증가할수록 컨테이너의 높이도 증가합니다.

여러 줄의 텍스트를 세로로 가운데에 맞추려면 이 옵션을 사용하세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52CSS.com</title>
<스타일 유형="텍스트/css">
#미스터진 {
너비:500px;
패딩:50px 0;
테두리:1px 솔리드 #03c;
텍스트 정렬:가운데;
}
</style>
</head>
<본문>
<div id="MrJin"><p><a href="http://www.52CSS.com/">CSS 웹 디자인 </p><p>우리는 중국 웹사이트를 강화하기 위해 최선을 다하고 있습니다! </a></p></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<스타일 유형="텍스트/css">
#미스터진 {
너비:500px;
패딩:50px 0;
테두리:1px 솔리드 #03c;
텍스트 정렬:가운데;
}
</style>
</head>
<본문>
<div id="MrJin"><a href="http://www.52CSS.com/">
<p>CSS 웹 디자인</p>
<p>중국 웹마스터 사이트</p>
<p>우리는 중국 웹사이트를 강화하기 위해 최선을 다하고 있습니다! </p>
</a></div>
</body>
</html>