CSS方式水平對齊表

我想在瀏覽器窗口的中心顯示一個固定寬度的表。現在我用CSS方式水平對齊表

<table width="200" align="center">

但Visual Studio 2008中給出在這條線警告：

屬性 '對齊' 被認爲是過時的。建議使用更新的構造。

我應該使用什麼樣式的CSS來獲得相同的佈局？

來源

2008-11-19 Alexander Prokofyev

那麼，你最終選擇哪種解決方案？ – 2008-11-21 16:44:08

169

史蒂芬是正確的，在theory：

使用「正確」方式將表格居中CSS。如果左右邊距相等，則合適的瀏覽器應該將表格居中。要做到這一點最簡單的方法是將左，右頁邊距設置爲因此，人們可以在樣式表中寫上「自動」：

table 
{ 
    margin-left: auto; 
    margin-right: auto; 
}

但這個答案的文章開頭提到給你所有其他方式集中一張桌子。

優雅的CSS跨瀏覽器的解決方案：這個工作在兩個MSIE 6（怪癖和標準），Mozilla的，歌劇，甚至Netscape 4.x版本不設置任何明確的寬度：

div.centered 
{ 
    text-align: center; 
} 

div.centered table 
{ 
    margin: 0 auto; 
    text-align: left; 
} 


<div class="centered"> 
    <table> 
    … 
    </table> 
</div>

來源

2008-11-19 06:28:04 VonC

並感謝文章鏈接！ – 2008-11-19 06:39:38

style="text-align:center;"

（我認爲）

，或者你可以不理它，它仍然有效

來源

2008-11-19 06:22:08

試試這個：

<table width="200" style="margin-left:auto;margin-right:auto">

來源

2008-11-19 06:27:05 jalbert

這應該工作：

<div style="text-align:center;"> 
    <table style="margin: 0 auto;"> 
    <!-- table markup here. --> 
    </table> 
</div>

來源

2008-11-19 06:30:21

簡單。 IE6及以上版本將以「margin：0 auto」爲中心開心地工作;如果只有頁面呈現在「標準」模式下。要做到這一點，你需要一個有效的DOCTYPE聲明，如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

真，IE5.5及以下仍然拒絕中心的表，但也許你可以忍受的，特別是如果頁面仍然功能與表左對齊。我認爲到目前爲止，IE5.5及以下版本的用戶都習慣於一些奇怪的網站 - 但您仍然需要確保這些視覺故障不會導致您的網站無法使用。

快樂編碼！

編輯：對不起，我應該指出，你不必有一個「嚴格」文檔類型來獲得IE6和「標準」渲染模式。我意識到這可能從我上面發佈的doctype示例中看起來如此。例如，該DOCTYPE聲明當然同樣的工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2008-11-19 21:05:22

我剛學這個，什麼終於爲我工作是先製作一個表格有三行。將左右行的邊距設置爲50％。然後在中心「表格行」的「表格數據」內放置一行固定寬度的表格。

來源

2009-10-02 02:36:49

<style> 
    .abc { 
     text-align: center; 
    } 
</style> 

<table class="abc"> 
    <tr> 
     <td>Item1</td> 
     <td>Item2</td> 
    </tr> 
</table>

來源

2013-12-19 09:50:24

雖然它可能是當今世界的異端 - 在過去，你會做下面的非css代碼。這適用於一切直至幷包括今天的瀏覽器，但 - 正如我已經說過 - 這是異端邪說在今天的世界：

<center> 
<table> 
    ... 
</table> 
</center>

你需要的是一些方法來告訴你要居中的表，而該人是使用較舊的瀏覽器。然後在桌子周圍插入「< center>」命令。否則 - 使用CSS。

令人驚訝 - 如果你想中心在身體的一切信息 - 你只可以使用標準的

text-align: center;

CSS命令和IE8（至少）會中心，包括表的頁面上的所有內容。

來源

2015-11-22 19:57:47

CSS方式水平對齊表

回答

相關問題