在頁面上居中放置可變大小的塊元素

我已經繼承了一個非常舊的網頁，其中包含水平和垂直屏幕上居中顯示的一段文本。在頁面上居中放置可變大小的塊元素

下面的代碼：

<html> 
<body> 
<center><table height='100%'> 
<tr style="vertical-align:middle"><td> 
<pre style="font-size: xx-large"> 
Q: How many Bell Labs Vice Presidents does it take to change a light bulb? 
A: That's proprietary information. Answer available from AT&amp;T on payment 
    of license fee (binary only). 
</pre> 
</td></tr></table></center> 
</body> 
</html>

它不會在的jsfiddle正確呈現，但它作爲一個獨立的頁面，你可以看到here。

我想將標記帶入21世紀，同時仍然使頁面呈現基本上相同的方式（特別是以文本塊水平和垂直居中）。我怎樣才能做到這一點與CSS？非基於表格的解決方案會更可取（因爲數據不是表格），但我會盡我所能。

新的標記，我的頁的書面看起來是這樣的，並具有除了定心的一切：

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>/usr/bin/fortune</title> 
    <style> 
     p { 
     font-size: xx-large; 
     font-family: monospace; 
     white-space: pre; 
     } 
     /* insert CSS for centering here */ 
    </style> 
    </head> 
    <body> 
    <p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb? 
A: That's proprietary information. Answer available from AT&amp;T on payment 
    of license fee (binary only).</p> 
    </body> 
</html>

來源

2013-07-26 Taymon

它渲染罰款我在jsfiddle。只需將渲染內容的邊距一直拖到左側，就可以看到它的中心。 [見這裏]（http://i.imgur.com/groMgbw.png）。 –

它不在jsFiddle中垂直居中。 – Taymon

這聽起來像一個很好的例子爲display: table;你想對非表格數據的一些表樣式：

HTML

<div> 
    <p> 
    Q: How many Bell Labs Vice Presidents does it take to change a light bulb? 
    A: That's proprietary information. 
     Answer available from AT&T on payment of license fee (binary only). 
    </p> 
</div>

CSS

html, body { 
    height: 100%; 
} 
div { 
    display: table; 
    height: 100%; 
    margin: 0 auto; 
} 
p { 
    display: table-cell; 
    vertical-align: middle; 
}

只有中心的內容，並且不支持IE6或7對於剛剛1段文字大小不定，這會保持居中：http://jsfiddle.net/hXuee/

來源

2013-07-26 20:06:32 SlightlyCuban

這基本上是我最終做的，除了我將容器規則應用於文檔主體而不是創建div。 – Taymon

有時候，你真正想要的只是一個表格單元:)在信用到期的情況下，我首先閱讀了這個方法[在這個博客上]（http://www.hughlashbrooke.com/two-methods-for-vertical-定心功能於CSS /）。 – SlightlyCuban

......我最終不得不加入額外的div，因爲無論是否使用div-free代碼，儘管在將它粘貼到Web Inspector時完全正常工作，但實際上從我的Web服務器提供時卻失敗了。瀏覽器有時候很奇怪。 – Taymon

一種方法是對其進行調整。這裏有一個辦法我這樣做，得到它幾乎死點：

<html> 
<body> 
<table height='100%' width='100%'> 

<tr style="vertical-align:middle; text-align: center;"><td style="position: relative; top: -6%"> 
<pre style="font-size: xx-large; "> 
Q: How many Bell Labs Vice Presidents does it take to change a light bulb? 
A: That's proprietary information. Answer available from AT&T on payment 
    of license fee (binary only). 
</pre> 
</td></tr></table> 
</body> 
</html>

編輯，居中塊，而不是文字，我用這個：

<html> 
<body> 
<table height='100%' style="margin-left: auto; margin-right: auto;"> 

<tr style="vertical-align:middle;"><td style="position: relative; top: -6%;"> 
<pre style="font-size: xxx-large; "> 
Q: How many Bell Labs Vice Presidents does it take to change a light bulb? 
A: That's proprietary information. Answer available from AT&T on payment 
    of license fee (binary only). 
</pre> 
</td></tr></table> 
</body> 
</html>

來源

2013-07-26 19:25:16 JVE999

這依賴於具有固定高度的文本塊，如果必須但我寧願避免（文本是動態生成的，並不總是相同的高度），我可以這樣做。另外，'text-align：center'以文本的每一行爲中心;我只想整個街區居中。 – Taymon

我嘗試過不同的高度和不同數量的文本行，它保持漂亮的中心位置，雖然它在全屏幕時看起來偏向中心，但是當我縮小窗口來檢查它時，它幾乎處於死中。我選擇使用百分比，因爲我預計它可能會隨像素數量而變化。 – JVE999

你的意思是你想讓這個塊在內部保持一致並且在外部居中？ – JVE999

您可以設置段落標記有位置固定，然後使用top屬性的百分比將其居中放置在頁面上。我這樣做：

position: fixed; 
top: 35%;

您可以點擊此處查看：http://jsfiddle.net/MYuqe/

來源

2013-07-26 19:56:33 Joel

在頁面上居中放置可變大小的塊元素

回答

相關問題