如何在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）。

如果您可以提供網站的網址，我可以爲您提供確切的規則。