How to center align logo image in Wordpress Theme?

Question

I want to center align logo image of my wordpress theme, I've tried to do so but failed;

Here's the CSS for Header Area

/* Header
-------------------------------------------------------------- */

.logo { float:left; width:370px; margin-bottom: 10px; }
.logo .logo-text { color:#595959; font-size:58px; line-height: 54px; font-family:Georgia; }
.logo .logo-text:hover { color:#575757; text-decoration: none;}

#search { float:left; width:235px; text-align: left; margin-bottom: 10px; }
#search #site-description { line-height: 11px; margin-bottom: 1px; font-size: 11px;}
#search input[type="text"] { width:190px; color:#828282; font-size:11px; padding-right: 30px; }
#search input:focus{ border: 1px solid #acacac;}
#search input[type="submit"] { color: #818181; }
#search input[type="submit"]:hover{ color: #FF4949; }
#search .button { margin-left:-30px; padding:0; border:none; background: none; }
#search .button span { color:#828282; background: none; text-transform: uppercase; }

#top-cart { text-align: right; float:right; position: relative; padding:1px 20px 5px 0; background: url(images/shopping-bag.png) no-repeat top right; width:280px; line-height: 16px;}
#top-cart > a{ color:#818181;}
#top-cart .mobile-link { display: none; position: absolute; width: 100%; height: 100%; text-indent: -9999em;}
#top-cart .dark-span .amount { color:#090909; font-size: 12px;}
#top-cart .cart-popup { display:none; width:295px; text-align: left; padding:20px 15px 15px 15px; border:1px solid #acacac; background: white url(images/line3.png) repeat-x top; position: absolute; z-index:10001; right:0; top:20px;}
#top-cart .cart-popup .empty { text-align: center;}
#top-cart .cart-popup .recently-added { font-size:10px; text-transform: uppercase;}
#top-cart .cart-popup .totals .amount, #top-cart .cart-popup .totals { font-family: Verdana; clear: both; padding:5px 0; margin-bottom: 10px; font-size:14px; text-transform: uppercase; text-align: right; color:#818181; }
#top-cart .cart-popup .totals .amount{ color:#090909; }
#top-cart .amount { font-size:14px; font-weight: normal; color:#FF4949;}
#top-cart .cart-popup .totals .price { font-size:14px; font-weight: normal; color:#090909;}
#top-cart .cart-popup .button { }

#links { text-align: right; float:right; width:280px; margin-top:3px; margin-bottom: 10px;}
.links li { padding:3px 0 3px 17px; background: url(images/link-divider.png) no-repeat center left; display:inline-block;}
.links li:first-child { background: none; }
.entry-title,.page-title { font-size:24px; font-weight:normal; padding-top: 5px;color: #090909 !important; }
.page-description { padding:40px 0; border:1px solid #efefef; border-right:0; border-left:0; margin:10px 0 30px 0; font-size:32px; line-height:40px; font-weight:normal; h1.notFound { font-size:48px; }
h1.notFound strong{ color: #FF4949 }
.error404 { padding:0 0 20px 0; }

I've tried text-align:center but failed to center align.

HTML Code:

<header id="header">
 <div id="search">
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<?php get_search_form(); ?></div>                

<div class="logo">
<?php $logoimg = etheme_get_option('logo'); ?>
<?php if($logoimg): ?>
<a href="<?php echo home_url(); ?>"><img src="<?php echo $logoimg ?>" alt="<?php bloginfo( 'description' ); ?>" /></a>
<?php else: ?>
<a href="<?php echo home_url(); ?>" class="logo-text"><?php bloginfo( 'name' ); ?></a>
<?php endif ;?></div>

<div class="cart-wrapper">
<?php if(class_exists('Commerce') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')): ?>
<a class="mobile-link" href="<?php echo wpsc_cart_item_url(); ?>"></a>
<div id="top-cart" class="shopping-cart-wrapper">
<?php get_template_part( 'cart_widget' ); ?></div>
<?php endif ;?>

<?php if(class_exists('-') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')): ?>
<?php global $c?>
<a class="mobile-link" href="<?php echo $c->cart->get_cart_url(); ?>"></a>
<div id="top-cart" class="shopping-cart-wrapper widget_shopping_cart">
<?php $cart_widget = new Cart(); $cart_widget->widget(); ?>
</div>
<?php endif ;?></a></div>

</header>   

I need suggestions on how to center align the logo image.

Thanks Regards

Answer 1

Remove the float and the make the width 100% for the logo class. That is if you want your logo to fill up the width of your page/container.

.login{
   width:100%;
   text-align:center;
   margin-bottom:10px;
}

If you have other elements/divs on either side of the logo, then you will need to calculate the width of the logo container, and do a text-align:center.

Answer 2

Can you provide your site URL, I have to see on site how the logo is aligned. Normally what you need to do is split all menu items(ul>li) by two. Lets assume you have 6 Menus, to do so, align the first item to more left and then shift the 4th Menu more right, By this you will make space for the logo in the middle.

Now Shift your logo to the middle by css rule: left:10% (% will make it Responsive, you may also use 10px).

If you can provide site url, i can provide you exact rule.