Question

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

编辑：以下代码适用于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根本不起作用。

任何人都知道如何将此元素移动到屏幕中心？

非常感谢！

Answer 1

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

margin:0px auto; display: block

忘记display:block是将对象默认为display:inline的常见问题，例如图片。

Answer 2

当您将元素的位置更改为fixed时，它将不再像正常的块级元素（div，p等）那样水平填充。如果没有指定的width参数，它将只有它需要的宽度。由于您的块仅与文本一样宽，因此更改文本对齐方式不会改变外观，因为如果您了解我的意思，它已经向左和向右冲洗了......

您可以解决此问题的一种方法是指定宽度，但这可能会有问题，因为您不知道浏览器窗口的宽度。一种更简洁的方式（可能无法跨浏览器工作，我不确定），也是指定right：

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

这将使块水平填充窗口，在任一侧留下5px。那么文本对齐应该有效。

编辑：我刚刚测试过，这适用于Firefox和Internet Explorer 7.请在此处试用：http://jsbin.com/ihofa

Answer 3

margin:0px auto

或者每次用户调整窗口大小时，您都可以使用Javascript / jQuery来评估和居中。

Answer 4

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

Answer 5

取决于您的网站是否使用固定尺寸作为解决方案，这将是该问题的解决方案。

如果您使用固定大小，则使用left属性将其置于中心位置。

如果您根据用户的分辨率扩展您的网站，则需要使用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";
}

如何始终在顶部和居中显示元素？

5 个答案: