溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css怎樣使文字垂直對齊，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
css使文字垂直對齊的方法：1、設置行文字的實際高度height和所在行的高度line-height相等；2、通過設置上下的padding值相同使多行未知高度文字垂直居中；3、使用vertical-align使多行文本固定高度的居中即可。
一、單行文字垂直居中對齊
如果一個容器中只有一行文字，對它實現居中相對比較簡單，我們只需要設置它的實際高度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>效果圖：
不過在Internet Explorer 6及以下版本中，這和方法不支持對圖片設置垂直居中。
二、多行未知高度文字的垂直居中
如果一段內容，它的高度是可變的那么我們就可以使用上一節講到的實現水平居中時使用到的最后一種方法，就是設定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種方式而已。可以使用類似下面的代碼：
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>現在我們要使這段文字垂直居中顯示！
div {
padding:25px;
border:1px solid #FF0099;
}
</pre>
</div>
</body>
</html>效果圖：
三、多行文本固定高度的居中
CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用，但是在CSS中還有一個display屬性能夠模擬<table>，所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用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怎樣使文字垂直對齊有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
