Question

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

.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非常简单，只是具有相应类和id属性的列表。

Answer 1

设置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/

Answer 2

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

这可能对您没有用处的原因是它还要求对象具有已定义的width并具有块类型display属性（即display:block或{ {1}}）。

它必须是display:inline-block，因为只能以这种方式操纵块。

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

如果您仍在努力使用它，请尝试使用Firebug（或类似版本）并检查浏览器认为它正在使用该框进行操作。你可以在这里发现问题。

如果这没有帮助，请创建一个JSFiddle示例;这将帮助您了解正在发生的事情，并且还会给您一些展示在这里的内容。

Answer 3

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

div {
    text-align: center;
}

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

div是ul周围的容器。

See this fiddle for live demo

Answer 4

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

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

对象以这种方式居中。

Answer 5

您需要设置明确的宽度，以便margin:0 auto能够正常工作。

或者你可以使用一些位置技巧，如seen here，当宽度是未知的时候。

您需要从display:none删除.navbar，否则您将看不到任何内容;除非工作中有其他代码没有包括在内。

Answer 6

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

Answer 7

使用.navbar或section将div放入容器中，然后将容器的display属性设置为flex，然后将justify-content property设置为center并给navbar指定特定宽度。像这样：

section or code {
  display: flex;
  justify-content: center;
  width: 300px;
}

正确居中<ul> </ul>

7 个答案: