首頁 > 開發者 > CSS

css vertical-align:middle來實現垂直置中

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 代碼如下 複製代碼

<!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>404頁面</title>
 </head>
 <body>
     <div class="wall">
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a>
     </div>
 </body>
 </html>

代碼很簡單，就一個class="wall"的div標籤，一個a標籤，一個class=“img404”的img標籤。

 

接下來就是寫css了，先讓class="wall"的div的寬和高都為100%，以填充整個頁面，CSS如下：

 代碼如下 複製代碼

<style type="text/css">
         body{ margin:0; background:#333; _height:100%;}
         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
         .img404{ border:0;width:700px;}
 </style>

上CSS裡面值得一說的恐怕就是為什麼要用絕對位置（position:absolute）以及_height:100%這個樣式了；我試了很多方法，結果我只能用絕對位置才能讓它的height:100%生效，當然固定定位（position:fixed）也是可以的，可是IE6不支援；_height:100%是為了相容IE6，讓class="wall"的div在IE6裡也能高度為100%。如果想驗證一下class="wall"的div現在是否已經填充了整個頁面，不妨在.wall裡面設一個背景色就可以知道了，這裡我就不做實驗了。

 

目前整頁的代碼如下：

 代碼如下 複製代碼

<!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>404頁面</title>
     <style type="text/css">
         body{ margin:0; background:#333; _height:100%;}
         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}
         .img404{ border:0; width:700px;}
 </style>
 </head>
 <body>
     <div class="wall">
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a>
     </div>
 </body>
 </html>

vertical-align:middle來實現垂直置中了，因為class="wall"的div填充了整個頁面，所以只要讓圖片在class="wall"的div裡面垂直置中就達到目的了。以前總是以為vertical-align與text-align是同樣的道理，一個是垂直置中，一個是水平置中，只要給class="wall"的div加上一個vertical-align:middle就能讓圖片垂直置中，結果一點效果也沒有。事實上vertical-align與text-align完全不一樣，給class="wall"的div加上一個text-align:center的話，毫無疑問是可以讓裡面的img水平置中，但vertical-align卻不能這樣子用。

先看一下W3C上對vertical-align的定義：vertical-align 屬性設定元素的垂直對齊。該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表儲存格中，這個屬性會設定儲存格框中的儲存格內容的對齊。

必須承認這句話我看了很久才看懂說的是神馬意思，我的理解是它有兩種用法：

第一種用法，先看後面一句“在表儲存格中，這個屬性會設定儲存格框中的儲存格內容的對齊。”這很容易理解，如果給一個表格的td加一個vertical-align:middle的樣式，表格裡面的內容會垂直置中，同樣的如果給一個vertical-align:bottom就會底部對齊，如果給一個vertical-align:top就會頂部對齊。

第二種用法，看前頁一句“該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。”專業的語言我不會說的，可以打個比喻：假設有兩個行內元素a和b，a和b都是img，當a加了一個vertical-align:middle樣式之後，b的底部（基準）就會對齊a的中間位置，如下圖：

如果a和b都加了一個vertical-align:middle樣式，那麼就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖：

說到這裡，思路就清晰了（PS：理應知道vertical-align可以設middle,top,bottom等等，甚至可以設定具體的值或百分比，如果想知道會有怎樣的效果，可以自己實驗一下，這裡就不多說了。）。

接下來回到這篇文章的主題，現在我要讓class="img404"的img在class="wall"的div裡面垂直置中，我可以在div裡面加一個span空標籤，把它的高度設為100%，再給它一個vertical-align:middle樣式，同樣地給img一個vertical-align:middle樣式，那麼img就可以在div裡面垂直置中了。如圖：

 代碼如下 複製代碼
<!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>404頁面</title>
      <style type="text/css">
          body{ margin:0; background:#333; _height:100%;}
          .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}
          .img404{ border:0; width:700px; vertical-align:middle;}
          .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}
  </style>
  </head>
  <body>
      <div class="wall">
         <span class="verticalAlign"></span>
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a>
      </div>
  </body>
  </html>

以上的CSS裡面值得一提的是.verticalAlign，加一個display:inline-block是為了觸發它的layout，以讓本來沒有layout的span可以設定寬和高，margin-left:-1px是為了讓span左移一個像素，而令img在水平方向上回到正中位置；另外.wall裡面的font-size:0正如我上一篇文章所說的是為了消除代碼換行所造成的空隙。

最終效果如下：

關於

I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.

CSS:

 代碼如下 複製代碼

div.categoryLinks { 
        margin: 1em 16px; 
        padding: 0 4px; 
        border-width: 1px 0; 
        border-style: solid; 
        border-color: #ece754; 
        background: #f7f5b7; 
        color: #a49f1c; 
        text-align: center; 
        font-size: 1.4em; 
} 
div.categoryLinks em { 
        font-size: 0.6em; 
        font-style: normal; 
        vertical-align: middle; 
} 

 

HTML:

<div class="categoryLinks"> 
        <em>SECTION:</em> 
        Page One &#183; 
        Page Two &#183; 
        <a href="link">Page Three</a> 
</div> 

Screenshot:

UPDATE: just to be clear, I am aware more-or-less how vertical-align works, i.e. I already know the common misconceptions.

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More