Question

我有一个用CSS制作的盒子，我希望它与中心对齐。不幸的是，我已经看了一遍，找不到有效的答案 HTML：

<div id="top_bar">
        <div class="inner">

        </div>
</div>

CSS：

#top_bar {
vertical-align:text-top;
width: 90%;
/*padding: 10px;*/
border: 3px solid gray;
/*margin: auto;
margin-left: auto;
margin-right: auto;*/
position: fixed;
bottom: 0px;
}

#top_bar .inner {
  padding:10px;
}

body { margin-left:0px; }

Answer 1

删除 position:fixed，有关详细信息，请参阅此question

Answer 2

#top_bar{
  margin:0 auto;
  /* Others .... */
}

Answer 3

也许尝试将margin：auto放在内部div

上

Answer 4

这是working sample。

如果像@wrapper这样的父元素有text-align:center且内部的#content容器有margin: 0 auto;，那么它就会居中。您可以使用此jsFiddle来了解不同规则的作用，并将您学到的知识应用到上面的代码中。

在上面的代码中，position: fixed迫使容器到达某个位置。如我在样本中所示，它需要被移除以便集中工作。

如何在CSS中对齐div？

4 个答案: