0

我继承了一个非常古老的网页，其中包含一个以屏幕为中心的文本，水平和垂直。

这是代码：

<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 中正确呈现，但它作为一个独立的页面，你可以在这里看到。

我想将标记带入 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>
4

3 回答 3

1

您可以将段落标签设置为固定位置，然后使用 top 属性的百分比使其在页面上居中。我这样做了：

position: fixed;
top: 35%;

你可以在这里查看：http: //jsfiddle.net/MYuqe/

于 2013-07-26T19:56:33.947 回答
1

这听起来像是一个很好的案例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-26T20:06:32.860 回答
1

一种方法是调整它。这是我做到的一种方法，它几乎是死角：

<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-26T19:25:16.680 回答