1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Centering Header Logo

Discussion in 'Web Design' started by S1lv3rdo7, Dec 1, 2013.

  1. S1lv3rdo7

    S1lv3rdo7 Regular Member

    Joined:
    Jul 17, 2010
    Messages:
    480
    Likes Received:
    315
    Occupation:
    Tech Support
    Location:
    Austin, TX
    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.
     
  2. Blakester

    Blakester Power Member

    Joined:
    Mar 17, 2012
    Messages:
    720
    Likes Received:
    840
    Location:
    In front of my pc
    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 :D
     
  3. michaelr1988

    michaelr1988 Regular Member

    Joined:
    Apr 25, 2011
    Messages:
    470
    Likes Received:
    307
    Location:
    UK
    <div align="center">logo</div>
    or
    <div style="margin:0 auto;">logo</div>

    Don't really know what else will do it.
     
  4. S1lv3rdo7

    S1lv3rdo7 Regular Member

    Joined:
    Jul 17, 2010
    Messages:
    480
    Likes Received:
    315
    Occupation:
    Tech Support
    Location:
    Austin, TX
    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!
     
  5. hes21

    hes21 Jr. VIP Jr. VIP Premium Member

    Joined:
    Sep 11, 2013
    Messages:
    214
    Likes Received:
    49
    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.
     
    • Thanks Thanks x 1
  6. blackhatdamo

    blackhatdamo Registered Member

    Joined:
    Apr 6, 2012
    Messages:
    86
    Likes Received:
    27
    Location:
    A dark place
    instead of declaring a margin for both left and right just use margin:0 auto; far better
     
    • Thanks Thanks x 1
  7. nshunz

    nshunz Junior Member

    Joined:
    Nov 10, 2013
    Messages:
    106
    Likes Received:
    15
    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.
     
    • Thanks Thanks x 1
  8. themubeen

    themubeen Junior Member

    Joined:
    Feb 13, 2011
    Messages:
    121
    Likes Received:
    15
    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.
     
    • Thanks Thanks x 1
  9. cssbros

    cssbros Newbie

    Joined:
    Oct 17, 2012
    Messages:
    38
    Likes Received:
    3
    Occupation:
    Web Designer/Developer
    Location:
    Philippines
    Home Page:
    Display:block, margin:0 auto; and make sure to specify your width to center an image using CSS.
     
    • Thanks Thanks x 1