How to center logo image using float

Question

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.

score 5 · Accepted Answer · answered Aug 11 '15 at 13:25

5

Try text-align:center;

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

answered Aug 11 '15 at 13:25

Ionut Necula

11,107
4
45
69

Have tried text-align:center; but isn't that just for text not images? – Endô Fujimoto Aug 11 '15 at 13:26
1

You use the text-align center on the div with id #logo to center all the elements inside it, including images. – Ionut Necula Aug 11 '15 at 13:28
@Endô Fujimoto `img` is actually a text element – areim Aug 11 '15 at 13:29
@areim Actually, that's not quite accurate. They're _replaced_ elements. See this [reference](http://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level)... – War10ck Aug 11 '15 at 13:31
Got it working. Thanks for all your help the code works great – Endô Fujimoto Aug 11 '15 at 13:40
Sure, no problem. Glad to help. – Ionut Necula Aug 11 '15 at 13:42

score 4 · Answer 2 · answered Aug 11 '15 at 13:27

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

score 1 · Answer 3 · answered Aug 11 '15 at 13:28

1

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

answered Aug 11 '15 at 13:28

Martijn de Langh

405
3
16

score 1 · Answer 4 · answered Aug 11 '15 at 13:29

1

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

answered Aug 11 '15 at 13:29

Robert

19,800
5
55
85

score 0 · Answer 5 · edited Aug 11 '15 at 14:21

0

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/

edited Aug 11 '15 at 14:21

AeroX

3,387
2
25
39

answered Aug 11 '15 at 13:48

Shishibi

53
10

How to center logo image using float

5 Answers5