0

I have a problem with the CSS for the logo. I want my logo to be in the middle horizontaly every time but my logo isnt aligned with the centered image in the backgroundand, the logo isnt right in the middle of the browser .With my css code the logo isnt in the center horizontally. I have no idea where is the problem. My CSS is:

#logo { display:inline-block; margin:10px auto 0 auto; }
#logo img {max-width:330.5%; }
#logo a{ display: block; margin-left: 0%; margin-right: 0%;}

Pls tell me how to center a logo right in the middle with a CSS code

#logo { display:inline-block; margin:10px auto 0 auto; }
#logo img {max-width:330.5%; }
#logo a{ display: block; margin-left: 0%; margin-right: 0%;}
4
Contributors
21
Replies
71
Views
1 Year
Discussion Span
Last Post by LONGWAY
1

Don't double post with the same question! You've got already a good reply in your previous thread how to center elements.

0

huuh i think they were asking to rewrite the post in the previous thread.

0

No, he just said with only the CSS there's not much to help, but also linked to a good resource how to center elements within different scenarios.

0

i still have the problem, the logo isnt in the center no matter what i do, the logo is a few px displaced from the center

0

nope, just need a sugestion where could the problem be

1

Well, if it's only a few pixels then perhaps your logo image is not prepared properly? Also what's with the odd max-width: 330.5%?

0

the logo is small and i want it 900px long and its just a png img

Edited by LONGWAY

0

I have been centering images like this for years:

CSS:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

HTML:

<div class="bxfix cenx"
  <img src="imgfile.png" alt="Mine" class="ceni" />
</div>

The style .cenx makes it work with older IE.

Edited by MidiMagic

0

@MidiMagic - with the HTML you have here, the text-align: centeron that div would be enough. The rest of the styles is not necessary to center that image.

0

Text-align does not normally affect an image. I could leave it out except that some versions of IE don't work without it. IE will center the image with just the test align. Other browsers will not. What I used wo5rks with all browsers.

0

Sure it does! An img tag is an inline element by default and an inline element within a block-level element, such as a div tag, will center horizontally just fine with only text-align: center. This is how it shoud behave according the spec and every browser handles it this way. The rest of your CSS properties are redundant and have actually no effect on centering an element.

http://codepen.io/gentlemedia/pen/LNaJMx

But I think I know where you coming from... :)
If we wanted to center (in the old days) an element (usually a layout wrapper div) with margin: 0 auto this didn't work in IE6 and below (was not supported), so we needed a text-align: center on the parent (usually the body tag) to get it horizontally centered in IE6.

Edited by gentlemedia

0

nothing helps i guess, the logo img still isnt aligned in the center. The starting point of the img is still left.

0

that wont be so easy, and i think dropbox supports just .html
The id of the div is logo, and the logo is just an image without any aditional text so maybe "#logo a " should be empty, but nothing works for the div id "#logo" and the img in that div "#logo img". inspite of everything i do, the starting point for the img is left. i need center.

0

That's what I said. if it's just a static website you can use dropbox as a server, but if you use a serverside language such as PHP, you can't.

Post at least then also the HTML for that logo here in the thread!

0

<div id="header" >

  <div id="logo" >
             <a href="/name">
                         <img src="/name/img/logo.png"></img>
             </a>
    </div>

</div>

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.