I'm pretty decent at CSS, but for some reason can't figure this out. I created a subtheme based on the fluid version of the Zen theme, and for the life of me I can't figure out how to get my logo centered horizontally on the page. I've been able to change the margins, and the width, but can't get it to center dynamically.

Comments

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

I'm using 6.x but I can give you an example:

 <div id="logo-title">
  <div id="logo">
   <a href="#home" title="Home: Site Name" rel="home"><img src="/path/to/image" alt="Logo: Site Name" id="logo-image" /></a>
  </div>
 </div>

CSS:

 #logo-title {
    width:100%;
    text-align:center;
 }
 #logo {
    margin:0 auto 0 auto;
    padding:0;
    width:300px;
 }

I hope this helps.

yoroy’s picture

yoroy commented
Status: Active » Fixed

Cleaning up the queue, feel free to reopen if you need more info.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

diysista’s picture

diysista commented
Version: 5.x-1.1 » 6.x-2.x-dev
Component: Code » layout.css

I'm trying to center my zen theme too, however I have no idea where to start with this css concept. Where do I go to get it to center? thanks...

melonkid’s picture

melonkid commented

Hello.

Try this in page.css:

#logo /* Wrapping link for logo */ {
  display: block;
  margin: 0;
  padding: 0;
}

#logo img {
  display: block;
  margin: 0 auto;
  vertical-align: bottom;
}

I use this code and works fine.

Bye.

mavaddat’s picture

mavaddat commented

Praise be to melonkid. His advice worked perfectly.