1

我目前正在尝试将一个水平居中，就像在对象（如果你愿意的话）本身，而不是里面的文本。我尝试了很多建议并遵循了许多教程，但没有任何效果......我最终自己设置了边距，但我希望它能够动态调整自身。这是我目前拥有的代码：

.navbar { 
    margin:auto;
    margin-left:30em;
    display:none;
    position:fixed;
    top:0px;
    list-style-type:none;
    padding:0;
    overflow:hidden;
    z-index:200;
}
.navbar li {
    float: left;
    display:inline;
    width:120px;
    text-align:center;
}
.navbar #left {
    left:0px;
    width:100px;
    height:35px;
    background:url('res/navigation.png') 0 0;
}

... 等等。html真的很简单，就是对应class和id属性的列表。

4

7 回答 7

2

许多解决方案提出的设置margin: 0 auto;不起作用，因为你已经position: fixed;上了你的ul;）

在我看来，定位元素居中的一个好方法是：

.someelement{
    width: 600px;
    position: fixed;
    left: 50%;
    margin-left: -300px; //here we put half of the element's width
}

这种方法的一个活生生的例子可以在这里看到：http: //jsfiddle.net/skip405/G8LrV/ 这种方法的唯一问题是我们设置了固定宽度。

如果你有一个元素的宽度可能会改变- 例如，你可能必须通过 jQuery 动态计算它，然后设置负边距。

可以在这里看到一个活生生的例子：http: //jsfiddle.net/skip405/G8LrV/1/

于 2012-07-22T22:32:48.067 回答
1

使用 CSS 居中需要使用margin: 0 auto-- 正如其他人所提到的，并且我认为您已经尝试过。

这可能对您不起作用的原因是它还要求对象具有已定义width并具有块类型display属性（即，要么display:block或display:inline-block）。

它必须是 a block，因为只有块才能以这种方式进行操作。

它需要有，width因为块默认为其容器宽度的 100%，这显然没有空间让它居中。宽度可以是百分比而不是px如果您希望它适应容器的大小，但必须设置它。

如果您仍然在努力解决它，请尝试使用 Firebug（或类似的）并检查浏览器认为它对盒子所做的事情。您可能会在这里发现问题。

如果这没有帮助，请创建一个 JSFiddle 示例；这将帮助您了解正在发生的事情，并在此处显示一些内容。

于 2012-07-22T21:40:32.290 回答
1

这有点棘手，您必须将其<ul>放入容器中。然后使用以下css：

div {
    text-align: center;
}

ul {
    text-align: left;
    display: inline-block;
    width: auto;
}

div集装箱在哪里ul。

看到这个小提琴现场演示

于 2012-07-22T21:50:24.647 回答
0

将 div 相对于它的容器居中，你需要做

width:75%;
margin-left:auto;
margin-right:auto;

这样对象就会以自身为中心。

于 2012-07-22T21:28:51.950 回答
0

您需要设置一个明确的宽度才能margin:0 auto工作。

或者，当宽度未知时，您可以使用一些位置技巧，如此处所示。

而且您需要从中删除display:none，.navbar否则您将看不到任何东西；除非有一些其他代码在工作中不包括在内。

于 2012-07-22T21:36:24.303 回答
0

您可以尝试使用 section 或 div 将 .navbar 放入容器中，然后将容器的 display 属性设置为 flex，然后将 justify-content 属性设置为 center 并为导航栏提供特定的宽度。像这样的东西： section or code{display: flex; justify-content: center; width: 300px;

于 2019-09-21T23:49:55.783 回答
0

.navbar使用section或div然后将display容器的属性设置为flexthen justify-content propertyto并将其放入容器中center并给出navbar特定的宽度。像这样的东西：

section or code {
  display: flex;
  justify-content: center;
  width: 300px;
}
于 2019-09-22T01:00:51.650 回答