css如何使文字垂直對齊-css教學-PHP中文網

css使文字垂直對齊的方法：1、設定行文字的實際高度height和所在行的高度line-height相等；2、透過設定上下的padding值相同使多行未知高度文字垂直居中；3、使用vertical-align使多行文字固定高度的居中即可。

css如何使文字垂直對齊

本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。

一、單行文字垂直居中對齊

如果一個容器中只有一行文字，對它實作居中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。

範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单行文字实现垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

登入後複製

效果圖：

css如何使文字垂直對齊

#不過在Internet Explorer 6及以下版本中，這和方法不支援對圖片設定垂直居中。

二、多行未知高度文字的垂直居中

如果一段內容，它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定Padding，讓上下的padding值相同即可。同樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把

完全填充的一種方式而已。可以使用類似下面的程式碼：

div {
padding:25px;
}

登入後複製

範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
}

登入後複製

效果圖：

css如何使文字垂直對齊

三、多行文字固定高度的居中

CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起作用，但是在CSS中還有一個display屬性能夠模擬

，所以我們可以使用這個屬性來讓

模擬

就可以使用vertical-align了。

注意，display:table和display:table-cell的使用方法，前者必須設定在父元素上，後者必須設定在子元素上，因此我們要為需要定位的文字再增加一個< ;div>元素：

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
width:760px;
}

登入後複製

範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div#wrap {
height: 300px;
display: table;
}
div#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！
</div>
</div>
</body>
</html>

登入後複製

效果圖：

css如何使文字垂直對齊