gpt4 book ai didi

html - 在页面上居中可变大小的 block 元素

转载 作者:太空宇宙 更新时间:2023-11-03 23:58:12 25 4
gpt4 key购买 nike

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

代码如下:

<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 世纪,同时仍然让页面以基本相同的方式呈现(特别是,文本 block 在水平和垂直方向上都居中)。我怎样才能用 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>

最佳答案

这听起来像是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/

关于html - 在页面上居中可变大小的 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17889236/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com