如何在Wordpress主题中居中对齐logo图像？

Question

我想中心对齐我的WordPress主题的标志图像，我试过这样做但失败;

下面是头部域

/* 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; } 

我已经试过text-align:center但未能中心对齐的CSS。

HTML代码：

<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> 

我需要如何中心对齐标志形象的建议。

感谢 问候

Answer 1

取出float和使width 100％为标志类。那就是如果你想让你的标志填满你的页面/容器的宽度。

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

如果您对标志的两侧等元素/ div的，那么你就需要计算徽标容器的宽度，并做了text-align:center。

Answer 2

您能否提供您的网站网址，我必须在网站上看到徽标是如何对齐的。 通常你需要做的是将所有菜单项（ul> li）分成两部分。假设你有6个菜单，为此，将第一个项目向左对齐，然后将第四个菜单向右移动，这样可以为中间的徽标留出空间。

现在通过css规则将你的标志转移到中间：left：10％（％会使它响应，你也可以使用10px）。

如果您可以提供网站的网址，我可以为您提供确切的规则。