CODEWITHSUNDEEP
htmlcsswordpress
Endô Fujimoto
Endô Fujimoto

Reputation: 311

How to center logo image using float

Hello I have a logo on my website that I just can't seem to get centered. My css for the logo is as follow,

@media only screen and (min-width: 768px) {
    #logo {
        float: none;
        margin: 0 auto;
        width: 768px;
    }
}

http://www.questdesign.com.au/

Any chance you might know what i'm missing? Any help would be great. Thanks.

Upvotes: 1

Views: 3835

Answers (5)

Shishibi
Shishibi

Reputation: 53

You can try using flexbox to your logo container.

#logo{
    width:800px;
    display: flex;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Example here:
https://jsfiddle.net/86n9qb7b/

Upvotes: 0

Robert
Robert

Reputation: 20286

img is inline tag so you need either change display:block and then margin: 0 auto or in parent tag put text-align:center

Upvotes: 1

Martijn de Langh
Martijn de Langh

Reputation: 425

You can add a text-align:center; to the parent div and the width you want to have the image centered in (100% eg) removing the margin 0 auto

Upvotes: 1

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

img is inline tag, so it will not work even though you add margin:auto. Add property display:block, it will make img as block level element and margin:0 auto; will make it as center.

Your code will be

@media only screen and (min-width: 768px) {
    #logo { float: none; margin: 0 auto; width: 768px; display:block;}
}

Upvotes: 4

Ionut Necula
Ionut Necula

Reputation: 11472

Try text-align:center;

@media only screen and (min-width: 768px) {
    #logo { float: none; margin: 0 auto; width: 768px; text-align:center; }
}

Upvotes: 5

Related Questions