Centering Header Logo

S1lv3rdo7 · Dec 1, 2013

I'm trying to center a logo on the top of a wordpress blog. The theme is simple press. I went into the header.php and tried to adjust it, but it just moves it further to the right.

Code:

<div class="wrapper">
  <a href="<?php bloginfo('url'); ?>"><?php $logo = (get_option('simplepress_logo') <> '') ? get_option('simplepress_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
    <align=center><img src="<?php echo esc_url($logo); ?>" alt="Logo" id="logo"/></a></align>
    
    <div id="navwrap">
        <span class="nav_top"></span>
        <?php $menuClass = 'nav superfish';

I won't post the url because I don't want someone saying I'm just trying to advertise. Thanks for any help you guys can offer.

Blakester · Dec 1, 2013

Since I am not an expert at coding I use Dreamweaver to help me about these issues.

I know not the best answer you would expect but I thought to share

michaelr1988 · Dec 1, 2013

<div align="center">logo</div>
or
<div style="margin:0 auto;">logo</div>

Don't really know what else will do it.

S1lv3rdo7 · Dec 1, 2013

Blakester said:
Since I am not an expert at coding I use Dreamweaver to help me about these issues.

I know not the best answer you would expect but I thought to share

michaelr1988 said:
<div align="center">logo</div>
or
<div style="margin:0 auto;">logo</div>

Don't really know what else will do it.

Thanks for the help guys I don't know if this is the right way to do it or not but I used this code. Turns out it was in the .css not the header.php

Code:

#logo { border: none;  display: block; margin-left: auto; margin-right:auto}

Then I had to make adjustments vertically, so I just went and made the .png bigger in photoshop lol!

hes21 · Dec 28, 2013

I'd suggest using firefox with the firebug plugin. Depending on how the theme creator built it and what else is in the header area there are different answers. With firebug you can play around with the CSS and see what works.

blackhatdamo · Jan 27, 2014

S1lv3rdo7 said:
Thanks for the help guys I don't know if this is the right way to do it or not but I used this code. Turns out it was in the .css not the header.php

Code:

#logo { border: none; display: block; margin-left: auto; margin-right:auto}

Then I had to make adjustments vertically, so I just went and made the .png bigger in photoshop lol!

instead of declaring a margin for both left and right just use margin:0 auto; far better

nshunz · Jan 28, 2014

S1lv3rdo7 said:
Thanks for the help guys I don't know if this is the right way to do it or not but I used this code. Turns out it was in the .css not the header.php

Code:

#logo { border: none; display: block; margin-left: auto; margin-right:auto}

Then I had to make adjustments vertically, so I just went and made the .png bigger in photoshop lol!

To make vertical adjustments, use the code below.

Code:

#logo { border: none;  display: block; margin-left: auto; margin-right:auto; [B]padding-top:10px;[/B] }

Change the padding-top to an appropriate value.

themubeen · Feb 6, 2014

just add margin:0 auto; in logo class in css. If it is still not helpful then send me PM. I will solve it for you.

cssbros · Feb 28, 2014

Display:block, margin:0 auto; and make sure to specify your width to center an image using CSS.

Centering Header Logo

S1lv3rdo7

Regular Member

Blakester

Supreme Member

michaelr1988

Regular Member

S1lv3rdo7

Regular Member

hes21

Regular Member

blackhatdamo

Registered Member

nshunz

Junior Member

themubeen

Junior Member

cssbros

Newbie

Main Menu

Marketplace

Making Money

BlackHat World