1

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

http://lowhop.net/

请参阅此处，主要的蓝色标题不符合要求（未居中）。我试过了

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

但是，以前它不能可靠地工作。（似乎只适用于我的屏幕分辨率/浏览器）。

谢谢

4

4 回答 4

3

width使用margin: 0 autoto center时需要在元素上显式定义 a 。

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

于 2013-03-01T18:12:07.770 回答
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，看起来不需要它，但这是一个快速而肮脏的居中:)

希望有帮助

于 2013-03-01T18:18:30.807 回答
0

如果您必须使用绝对定位，您可以使用类似我的回答here。

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

left: 50%;
margin-left: -[your width/2];
于 2013-03-01T18:18:38.560 回答
0

就像用户 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。

于 2013-03-01T18:19:21.837 回答