gpt4 book ai didi

html - 如何始终在顶部和居中显示元素?

转载 作者:太空宇宙 更新时间:2023-11-03 20:24:28 26 4
gpt4 key购买 nike

我只是想知道为什么我的以下代码不起作用:

编辑:以下代码适用于 firefox 3.5,我无法在其他浏览器上测试,它是否普遍适用,还是存在一些问题?

<html>
<head>
<style type="text/css">
#test{
position:fixed;
left:50%;
}
</style>
</head>
<body>
<div id="test">Center</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asfd<br />
</body>
</html>

即使滚动,它也总是在顶部显示元素,但 text-align:center 根本不起作用。

有人知道如何将此元素移动到屏幕中央吗?

非常感谢!

最佳答案

当您将元素的位置更改为 fixed 时,它将不再像普通 block 级元素(div、p 等)那样水平填充。如果没有指定的 width 参数,它只会达到所需的宽度。由于您的 block 仅与文本一样宽,因此更改文本对齐方式不会改变外观,因为它已经向左和向右齐平,如果您明白我的意思...

解决此问题的一种方法是指定宽度,但这可能会有问题,因为您不知道浏览器窗口的宽度。一种更简洁的方法(这可能无法跨浏览器工作,我不确定)是还指定 right:

position: fixed;
left: 5px;
right: 5px;
text-align: center;

这将使方 block 水平填满窗口,每边留出 5px。文本对齐应该可以工作了。

编辑:我刚刚测试过,这在 Firefox 和 Internet Explorer 7 中有效。在这里试试:http://jsbin.com/ihofa

关于html - 如何始终在顶部和居中显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1570206/

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