在页面上居中放置可变大小的块元素

我已经继承了一个非常旧的网页，其中包含水平和垂直屏幕上居中显示的一段文本。在页面上居中放置可变大小的块元素

下面的代码：

<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

在页面上居中放置可变大小的块元素

回答

相关问题