HTML - 垂直對齊表格

可能重複：
How to Vertically Align a Table in CSS HTML - 垂直對齊表格

我想將我的表格嫌民建聯在頁面的中心。這是很容易水平對齊，它只是使用

<table align="center"></table>

但它不會允許這樣的：

<table align="center" valign="center">

我也着把VALIGN在一個div，因爲它不是一個有效的屬性。

我有執行小區佔用的，然後整個頁面使用的想法：

<Table align="center" width="100%"> 
<tr><td valign="middle" height="100%"></td></tr> 
</table>

，但同樣不工作，因爲我<td>不佔用整個頁面。當我將其高度設置爲100％時，它只佔用必要的空間量。

任何想法？ CSS代碼也很有幫助。

來源

2010-07-06 Johnrad

這不是不可能的，但每個解決方案都有問題。毫無疑問，這是CSS的一個缺點，如果W3C能夠提出垂直居中問題的標準解決方案，那就太棒了。 – 2010-07-06 17:51:04

來自我們的朋友tutorialzine.com http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html – Catfish 2010-07-06 17:56:53

http://www.pmob.co.uk/pob/vertical-center1.htm

後，你打開那個鏈接，右鍵點擊打開該頁面，並查看源代碼。

你會注意到IE很棘手，因爲它們使用條件註釋（如果你不習慣它們，這很棘手）。他們正在做的是在代碼的第48行取窗口的高度，並將窗口放在窗口當前高度的50％處，以便在調整大小時甚至可以工作。

對於其他瀏覽器，它應該很清楚它們是如何做到的......使用position，valign和text對齊的組合來實現所需的效果。

希望這會有所幫助！

來源

2010-07-06 17:45:21 rownage

如果您將對象的位置設置爲絕對值，它將起作用。

下面是一個例子（我只試過在Safari瀏覽器）：

<html> 
    <head> 
    <title>Dead Center</title> 
    <style type="text/css"> 
     .dead_center { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     width: 30%; 
     height: 30%; 
     margin: auto; 
     background-color: green; 
     } 
    </style> 
    </head> 
    <body> 
    <table class="dead_center"> 
     <tr> 
     <td>My centered table</td> 
     </tr> 
    </table> 
    </body> 
</html>

無需像對準任何廢棄的屬性。

來源

2010-07-06 17:41:23

添加另外19個表格行，它不再居中。 – 2010-07-06 18:16:08

HTML - 垂直對齊表格

回答

相關問題