溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css怎樣使文字垂直對(duì)齊

發(fā)布時(shí)間：2020-12-18 14:00:00 來(lái)源：億速云 閱讀：336 作者：小新 欄目：web開發(fā)

小編給大家分享一下css怎樣使文字垂直對(duì)齊，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

css使文字垂直對(duì)齊的方法：1、設(shè)置行文字的實(shí)際高度height和所在行的高度line-height相等；2、通過(guò)設(shè)置上下的padding值相同使多行未知高度文字垂直居中；3、使用vertical-align使多行文本固定高度的居中即可。

一、單行文字垂直居中對(duì)齊

如果一個(gè)容器中只有一行文字，對(duì)它實(shí)現(xiàn)居中相對(duì)比較簡(jiǎn)單，我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 單行文字實(shí)現(xiàn)垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>現(xiàn)在我們要使這段文字垂直居中顯示！</div>
</body>
</html>

效果圖：

css怎樣使文字垂直對(duì)齊

不過(guò)在Internet Explorer 6及以下版本中，這和方法不支持對(duì)圖片設(shè)置垂直居中。

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

如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來(lái)”的垂直居中方式，它只不過(guò)是使文字把<div>完全填充的一種方式而已?？梢允褂妙愃葡旅娴拇a：

div {
padding:25px;
}

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字實(shí)現(xiàn)垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre>現(xiàn)在我們要使這段文字垂直居中顯示！
div {
padding:25px;
border:1px solid #FF0099;
}
</pre>
</div>
</body>
</html>

效果圖：

css怎樣使文字垂直對(duì)齊

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

CSS中的vertical-align屬性只會(huì)對(duì)擁有valign特性的(X)HTML標(biāo)簽起作用，但是在CSS中還有一個(gè)display屬性能夠模擬<table>，所以我們可以使用這個(gè)屬性來(lái)讓<div>模擬<table>就可以使用vertical-align了。

注意，display:table和display:table-cell的使用方法，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個(gè)<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>多行文字實(shí)現(xiàn)垂直居中 </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">
現(xiàn)在我們要使這段文字垂直居中顯示！現(xiàn)在我們要使這段文字垂直居中顯示！現(xiàn)在我們要使這段文字垂直居中顯示！現(xiàn)在我們要使這段文字垂直居中顯示！
</div>
</div>
</body>
</html>

效果圖：

css怎樣使文字垂直對(duì)齊

看完了這篇文章，相信你對(duì)css怎樣使文字垂直對(duì)齊有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手