如何使這個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;  }

只是因為在現代瀏覽器中不推薦使用內聯樣式