如何显示始终位于顶部和居中的元素？

我只是想知道为什么我的下面的代码无法正常工作：如何显示始终位于顶部和居中的元素？

编辑：下面的代码在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完全不起作用。

任何人有任何想法如何将此元素移动到屏幕的中心？

非常感谢！

来源

2009-10-15 FurtiveFelon

当你改变一个元素的位置fixed，将不再填写水平像一个正常的块级元素（DIV，P等）。没有指定的width参数，它将只有它需要的宽度。由于您的区块只与文字一样宽，因此如果您的意思已经齐平，则更改文字对齐方式不会改变外观，因为它已经与左右齐平。

您可以绕过这是为了指定宽度，但这可能会产生问题，因为您不知道浏览器窗口的宽度。一个更简洁的方式（这可能无法正常工作跨浏览器，我不知道），就是还可以指定right：

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

这将使块填补两侧水平留下5px的窗口。文本对齐应该工作。

编辑：我只是测试，这部作品在Firefox和Internet Explorer 7中尝试一下这里：http://jsbin.com/ihofa

来源

2009-10-15 04:05:28 nickf

嘿，尼克，谢谢你的回答！然而，对于我的情况来说，这并不理想，我想用背景来表示它是一种特殊的元素，宽度过宽会使它变得有点丑陋。 – FurtiveFelon 2009-10-15 04:13:53

margin:0px auto

，或者您可以使用JavaScript/jQuery来评估每个用户调整窗口时间居中。

来源

2009-10-15 03:54:39 mauris

非常感谢您的回复！我已经用测试页更新了我的帖子，我不确定它为什么仍然不起作用... – FurtiveFelon 2009-10-15 04:11:06

您需要将您的文档类型设为XHTML 1.0 Transitional。 – mauris 2009-10-15 05:03:09

要居中的非文本对象，必须使用

margin:0px auto; display: block

忘记display:block是定心对象的公共问题，即默认为display:inline，如图像。

来源

2009-10-15 04:04:33

非常感谢您的回复！我用测试页更新了我的帖子，并添加了display：block仍然不起作用。 – FurtiveFelon 2009-10-15 04:10:18

取决于您的网站是否使用固定大小作为解决方案或不是问题的解决方案。

如果您使用的是固定大小，则使用左侧的属性将它居中，因为您正在修复位置。

如果您根据用户的分辨率扩展您的网站，您将需要使用JavaScript来获取屏幕的位置。使用x和y偏移量。下面是一些示例代码来获取死点，您需要将y偏移量改为屏幕顶部以获得所需的效果，但这是一个很好的起点，我相信您可以在此基础上获得您想要的结果。

function showdeadcenterdiv(Xwidth,Yheight,divid) { 
// First, determine how much the visitor has scrolled 

var scrolledX, scrolledY; 
if(self.pageYoffset) { 
    scrolledX = self.pageXoffset; 
    scrolledY = self.pageYoffset; 
} else if(document.documentElement && document.documentElement.scrollTop) { 
    scrolledX = document.documentElement.scrollLeft; 
    scrolledY = document.documentElement.scrollTop; 
} else if(document.body) { 
    scrolledX = document.body.scrollLeft; 
    scrolledY = document.body.scrollTop; 
} 

// Next, determine the coordinates of the center of browser's window 

var centerX, centerY; 
if(self.innerHeight) { 
    centerX = self.innerWidth; 
    centerY = self.innerHeight; 
} else if(document.documentElement && document.documentElement.clientHeight) { 
    centerX = document.documentElement.clientWidth; 
    centerY = document.documentElement.clientHeight; 
} else if(document.body) { 
    centerX = document.body.clientWidth; 
    centerY = document.body.clientHeight; 
} 

// Xwidth is the width of the div, Yheight is the height of the 
// div passed as arguments to the function: 
var leftoffset = scrolledX + (centerX - Xwidth)/2; 
var topoffset = scrolledY + (centerY - Yheight)/2; 
// The initial width and height of the div can be set in the 
// style sheet with display:none; divid is passed as an argument to // the function 
var o=document.getElementById(divid); 
var r=o.style; 
r.position='absolute'; 
r.top = topoffset + 'px'; 
r.left = leftoffset + 'px'; 
r.display = "block"; 
}

来源

2009-10-15 04:05:22 Dreamcube

.position-fixed-center { 
    position:fixed !important; 
    top: 50%; 
}

来源

2009-10-15 04:20:14 3zzy

如何显示始终位于顶部和居中的元素？

回答

相关问题