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

在您的width和中心添加div：

<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
}

DEMO HERE

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;
}

Demo

Answer 4

您无需为该元素设置宽度以缩小以适合其内容。您只需添加CSS display: inline-block;，它就会缩小到合适的大小。此外，您可以对子块执行相同操作，从而无需首先浮动元素。

Answer 5

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

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

Answer 6

如果#contentBox没有固定的宽度，您可以将margin: 0 auto添加到a.content，确实拥有它。然后，只需使用

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

Demo

Answer 7

尝试使用css

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

仅因为内联样式已在现代浏览器中弃用

如何让这个HTML元素居中？

7 个答案:

Demo