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

首頁

web前端

css教學

css如何使文字垂直對齊

藏色散人

Dec 18, 2020 am 10:17 AM

css

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

css如何使文字垂直對齊

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

推薦：《css視訊教學》

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

如果一個容器中只有一行文字，對它實作居中相對比較簡單，我們只需要設定它的實際高度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如何使文字垂直對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn