Question

我目前正在将PSD设计更改为HTML网站。然而，我遇到了一个问题。我无法集中某个元素。我已经尝试了所有常用的技巧。

http://lowhop.net/

在这里看到主蓝色标题是不在线的（不是居中）。我试过了

#slider{ position:absolute; left:0; right:0; margin-left:auto; margin-right:auto;

之前，它无法可靠地运作。（仅出现在我的屏幕分辨率/浏览器上）。

由于

Answer 1

在使用width居中时，您需要在元素上明确定义margin: 0 auto。

块元素占用完整的可用视口宽度，除非您明确地为它们指定宽度。

Answer 2

由于您明确设置了滑块DIV的宽度，您可以使用另一个技巧来居中它：

#slider 
{
  z-index: 2;
  background-image: url(../img/sliderbg_09_09.png);
  position: absolute;
  display: block;
  width: 982px;
  height: 251px;
  left: 50%;
  margin-left: -491px; /** half DIV width */
}

我可能会避免将此作为绝对DIV的位置，看起来不需要它，但这是一个快速而肮脏的中心：）

希望有所帮助

Answer 3

如果必须使用绝对定位，您可以使用something like my answer here。

基本上，你为元素声明一个显式宽度，然后给它

left: 50%;
margin-left: -[your width/2];

Answer 4

像用户showdev提到的那样：

是否需要绝对定位？它甚至需要居中吗？看起来你只是通过添加margin-left：85px来定位div＃navBar。看来你可以对div＃slider使用相同的方法。

你有

#navBar {
  background-image: url("../img/navbg_07.png");
  display: block;
  height: 38px;
  margin-left: 85px; /* attention on this */
  margin-top: 31px;
  position: relative;
  width: 879px;
  z-index: 1;
}

和这个

#slider {
  background-image: url("../img/sliderbg_09_09.png");
  display: block;
  height: 251px;
  position: absolute;
  width: 982px;
  z-index: 2;
}

所以，试试'margin-left：85px;'你的#slider。

无法居中这个绝对元素

4 个答案: