CODEWITHSUNDEEP
cssmargin
Nikk
Nikk

Reputation: 7891

Center DIV horizontally with margin

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>

Upvotes: 0

Views: 88

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240928

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;

Upvotes: 3

kdani
kdani

Reputation: 847

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.

Upvotes: 1

Harry
Harry

Reputation: 89750

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

Click here for a demo fiddle.

Upvotes: 1

Related Questions