How do I get this HTML element centered?

Question

How I want it to look: http://i.imgur.com/1nVr0ZM.png

Please note : Setting a fixed width is not useful here, because that would prevent the boxes from using all available screen space. I need the boxes to stay responsive, but want them to appear centered.

The problem is not so much the centering of the element, but the fact that the element takes up 100% width when it doesn't need to.

---

I have a container with several boxes, which are set to float.

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

The container div takes up 100% width, even if it doesn't require it all, so I can't get it centered with margin: 0 auto.

How do I get the container to not needlessly take up 100% width?

Answer 1

Add a width to your div and center :

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

In your fiddle , you should add width to your class :

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

DEMO HERE

Answer 2

Alternatively, if you do not want to set the width of the container div explicitly, you can remove float: left; from a and set the container's display to table .

Like this 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

You need fix width for margin to get worked. More importantly you always need to clear floated elements with 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

You don't need to set a width for that element to shrink to fit it's content. You can simply add the CSS display: inline-block; and it will shrink to the right size. Additionally, you can do the same with the child blocks, removing the need to float the elements in the first place.

Answer 5

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

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

Answer 6

If #contentBox doesn't have a fixed width, you can add margin: 0 auto to a.content , which do have it. Then, just use

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

Demo

Answer 7

try using the css

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

only because inline styling's have been deprecated in modern browers