Center DIV horizontally with margin

Question

For some reason, I cannot center the . logo class with CSS.

I've tried margin:0px auto .

Am I overlooking something?

Thanks.

CSS:

.full {
    width: 100%;
    height: auto;
    float: left;
    clear: none;
    position: relative;
    display: block;
}

.logo {
    width: 230px;
    height: 117px;
    float: left;
    clear: none;
    position: relative;
    display: block;
    margin: 10px auto 15px auto;
    padding: 0;
}

HTML:

<div class="full"> 

<figure class="logo"></figure> 
<figure class="x-button"></figure>

</div>

Answer 1

Remove the following:

.logo {
    float: left;
}

You cannot directly center a floated element via margin:0px auto; . If you want an element to be floated and center, you can always apply the margin to the parent while the child itself keeps the float. An example of this can be seen here.

Keep in mind, if it is just text you are trying to center, you can always just use: text-align:center;

Answer 2

Remove float: left; for .logo . float: left makes it align to the left.

Click here for a demo fiddle.

Answer 3

At least in this case, you can not center a floated element horizontally.

Here is a minimal example: http://jsfiddle.net/tJ5N3/

You can remove the floating, as others said above.

Also, as a workaround, you can wrap your element with a div that is horizontally centered. In this case, your can keep your floating, if it is necessary.