首頁>網頁設計教程>WEB標準化

一行、多行文字垂直居中的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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
width:500px;
height:200px;
border:1px solid #03c;
text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.52CSS.com/">CSS Web Design</a></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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
width:500px;
height:200px;
border:1px solid #03c;
text-align:center;
line-height:200px;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.52CSS.com/">CSS Web Design </a></div>
</body>
</html>


二、如果是多行文本，父容器不固定高度。

我們可以用padding來解決問題。

設定容器的padding上下為相同的固定值，容器的高度隨著內容的增加而增加。

以此來實現多行文字的垂直居中。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52CSS.com</title>
<style type="text/css">
#MrJin {
width:500px;
padding:50px 0;
border:1px solid #03c;
text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><p><a href="http://www.52CSS.com/">CSS Web Design </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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chinaz.com</title>
<style type="text/css">
#MrJin {
width:500px;
padding:50px 0;
border:1px solid #03c;
text-align:center;
}
</style>
</head>
<body>
<div id="MrJin"><a href="http://www.52CSS.com/">
<p>CSS Web Design</p>
<p>中國站長站</p>
<p>我們致力於為中文網站提供動力！ </p>
</a></div>
</body>
</html>

相關文章