CODEWITHSUNDEEP
htmlcsscontainerscenter
user3653087
user3653087

Reputation: 70

How do I get this HTML element centered?

How I want it to look: https://i.sstatic.net/LgfnJ.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?

Upvotes: 0

Views: 110

Answers (7)

Charaf JRA
Charaf JRA

Reputation: 8334

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

Upvotes: 3

Matthew R.
Matthew R.

Reputation: 4350

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.

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 1

Yogesh Mangaj
Yogesh Mangaj

Reputation: 3280

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

Upvotes: 1

Sam Denton
Sam Denton

Reputation: 465

try using the css

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

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

Upvotes: 0

Oriol
Oriol

Reputation: 287960

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

Upvotes: 0

gomflo
gomflo

Reputation: 171

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

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

Upvotes: 0

Related Questions