CSS - 垂直對齊DIV內容

我想通過CSS垂直居中一些內容。對於我的生活，我無法弄清楚原因。有人可以告訴我爲什麼無論我做什麼，下面的HTML中的「測試」這個詞始終是頂級的？CSS - 垂直對齊DIV內容

<html> 
    <head> 
     <title>test</title> 
    </head> 

    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
      <tr><td style='height:200px; width:300px; background-color:silver;'> 
       <div style='height:100%; width:100%; background-color:gray; text-align:center;'> 
        <div style='vertical-align:middle;'>test</div> 
       </div> 
      </td></tr> 
     </table> 
    </body> 
</html>

非常感謝您的幫助！

來源

2009-12-10 user208662

爲什麼是表裏面？你知道表格不適合佈局嗎？ – BalusC 2009-12-10 14:25:00

嘗試增加valign="middle"您td標籤，如：

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

來源

2009-12-10 14:15:44 inkedmn

這可能適用於大多數瀏覽器，但它不符合標準。另一方面，表格的使用也不好。 – Martijn 2010-01-14 09:29:33

問題問如何垂直對齊'div'內容，而不是'td'內容。 – 2013-02-22 19:05:52

嘗試設置樣式= '垂直對齊：中間;'在父元素中。現在你的確在告訴內部的div將文本對齊到中間，但是你並沒有讓它伸展並佔據整個頁面。基本上你最終會得到一個與文本一樣小的div元素。

您可以在Firefox中使用Firebug插件來調試這種CSS問題！

來源

2009-12-10 14:16:47 rui

-2

嘗試使用的line-height：100px的

來源

2009-12-10 14:17:37

的快速方法垂直對齊，像你的情況，是相匹配的行高與高度。

<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
       <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'> 
         <div> 
          <div style="text-align: center">test</div> 
         </div> 
       </td></tr> 
     </table> 
    </body> 
</html>

來源

2009-12-10 14:17:52

因爲vertical-align只是一個CSS替代的valign屬性在TD，因此僅適用於display: table-cell元素（不，正確的解決方案是不改變你的DIV的DISPLAYMODE）

如果可以的話設置一個固定的高度到div，你應該能夠與margin: auto 0

來源

2009-12-10 14:20:02

這種運作良好，垂直對齊：http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

來源

2012-08-20 01:31:55 user1040259

CSS - 垂直對齊DIV內容

回答

相關問題