如何让这个 HTML 元素居中？答案

【问题标题】：How do I get this HTML element centered?如何让这个 HTML 元素居中？
【发布时间】：2014-05-20 16:30:28
【问题描述】：

我希望它看起来如何：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% 的宽度？

【问题讨论】：

How to center a div in a div - horizontally?的可能重复
注意浮动元素后必须清除。在这种情况下，您似乎不需要浮动或定位元素。

标签： html css containers center

【解决方案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

【讨论】：

如果您查看布局，则暗示这些框应该是响应式的，因此为容器设置固定宽度在这里不是解决方案。我在问题中澄清了这一点。
您可以使用% 而不是像素来固定宽度，这样宽度将取决于您的屏幕宽度
容器中仍有空白的水平空间，具体取决于屏幕大小，因此框不会显示为居中。

【解决方案2】：

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

【讨论】：

容器也需要"text-align:center"，然后就可以了！谢谢你。虽然它确实在换行符处添加了空格，但目前它是最好的解决方案。

【解决方案3】：

或者，如果您不想明确设置容器 div 的宽度，您可以从a 中删除float: left;，并将容器的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%;
}

【讨论】：

不幸的是，就像其他答案一样，这不允许盒子适应不同的屏幕尺寸。

【解决方案4】：

您需要修复 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

【讨论】：

不要固定宽度，因为这超出了灵活框布局的全部目的。
@user3653087 您可以将margin-left 与百分比宽度一起使用。在这种情况下你可以写#contentBox { width: 80%; margin: 0 10%;}
容器中还有空的水平空间，取决于屏幕大小，所以不可靠。

【解决方案5】：

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

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

【讨论】：

布局应该是响应式的，所以这里设置固定宽度不是解决办法。

【解决方案6】：

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

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

Demo

【讨论】：

我希望这些框适应屏幕尺寸，但这样总是每行只显示一个框。

【解决方案7】：

尝试使用 css

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

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

【讨论】：

或即将被弃用
布局应该是响应式的，所以这里设置固定宽度不是解决办法。