如何使这个HTML元素居中？

Question

我希望它看起来如何： http : //i.imgur.com/1nVr0ZM.png

请注意 ：此处设置固定宽度不是有用的，因为这将阻止框使用所有可用的屏幕空间。 我需要使框保持响应状态，但希望它们显得居中。

问题不仅仅在于元素居中，还在于元素在不需要时占据100％宽度的事实。

---

我有一个带有几个盒子的容器，这些盒子被设置为浮动的。

<div id="contentBox">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
</div>

http://jsfiddle.net/56BJP/

容器div占用100％的宽度，即使它不需要全部，所以我不能以margin：0 auto为中心。

如何使容器不必要地占用100％的宽度？

Answer 1

为您的div和center添加一个width ：

<div id="contentBox" style="width:500px;margin:0 auto">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
</div>

在您的小提琴中，您应该为班级增加width ：

#contentBox
{
    position: relative;
    margin: 0 auto;
    width:50%;//fixe a width
}

此处演示

Answer 2

另外，如果您不想显式设置容器div的宽度，则可以删除float: left; 从a与设置在容器的display ，以table 。

像这样http://jsfiddle.net/56BJP/2/

#contentBox
{
    position: relative;
    margin: 0 auto;
    display: table;
}

a.content
{
    position: relative;
    display: block;
    width: 310px;
    height: 174px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #000 no-repeat;
    background-size: 100% 100%;
}

Answer 3

您需要固定宽度以确保margin正常工作。 更重要的是，您始终需要使用clearfix清除浮动元素：

<div id="contentBox">
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <a class="content"></a>
    <div class="clear"></div> <!-- clear float elements -->
</div>

的CSS

#contentBox {
  width: 300px;
  margin: 0 auto;
}

.clear{
    clear:both;
}

演示版

Answer 4

您无需为该元素设置宽度即可缩小以适合其内容。 您可以简单地添加CSS display: inline-block; 它将缩小到合适的尺寸。 另外，您可以对子块执行相同的操作，从而无需首先将元素浮动。

Answer 5

#contentBox {
  width: 300px;
  margin: 0 auto;
}

http://jsfiddle.net/56BJP/4/

Answer 6

如果#contentBox没有固定的宽度，则可以在a.content添加margin: 0 auto 。 然后，只需使用

a.content {
    display: block;
    width: 310px;
    height: 174px;
    margin: 0 auto;
}

演示版

Answer 7

尝试使用CSS

#contentBox {
  width: 500px;
  margin: 0 auto;  }

只是因为在现代浏览器中不推荐使用内联样式