CSS教學之div垂直居中的多種方法-css教學-PHP中文網

首頁

web前端

css教學

CSS教學之div垂直居中的多種方法

高洛峰

Mar 13, 2017 pm 05:50 PM

cssdiv垂直居中

這篇文章主要為大家詳細介紹了CSS教程之p垂直居中的多種方法，還包括多行文本垂直居中的方法，感興趣的小伙伴們可以參考一下

在說到這個問題的時候，也許有人會問CSS中不是有vertical-align 屬性來設定垂直居中的嗎？即使是某些瀏覽器不支援我只需做少許的CSS Hack技術就可以啊！所以這裡我還要囉嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的< ;td>、

、等，而像

、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。

一、單行垂直居中

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

如：

p {      
        height:25px;      
        line-height:25px;      
        overflow:hidden;      
 }

這段程式碼很簡，後面使用overflow:hidden的設定是為了防止內容超出容器或產生自動換行，這樣就達不到垂直居中效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 单行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  height:25px;   
  line-height:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }   
  </style>
 </head>
 <body>
  <p>现在我们要使这段文字垂直居中显示！</p>
 </body>
</html>

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

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

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

p {      
 padding:25px;      
}

這種方法的優點就是它可以在任何瀏覽器上運行，而且程式碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}   
 p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
 }   
  </style>
 </head>
 <body>
  <p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！   
   p {   
  padding:25px;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
 }

以上是CSS教學之div垂直居中的多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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