如何通過CSS居中對齊菜單？

我想通過CSS將搜索，徽標和購物車中心對齊，但我無法這樣做，如果我更改了邊距，所有對齊都會受到干擾。我如何將搜索，徽標和購物車對齊？如何通過CSS居中對齊菜單？

CSS：

.logo { 

float:left; 
width:370px; 
margin-bottom: 10px;} 

#search { 
float:left; 
width:235px; 
text-align: left; 
margin-bottom: 10px; } 

#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; 
}

HTML：

<div class="containerInner clearfix"> 
<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"> 

      </div>

我試着使用margin-left:auto;和margin-right:auto;，但失敗了。

來源

2013-08-18 MOZ

您的HTML代碼是PHP代碼，位於後端。這不是我們的瀏覽器收到的。請發佈HTML代碼 – FelipeAls

使用餘量：0 auto;在包裝中 – PRAH

我不確定您提供的HTML是否與CSS匹配（缺少棋子？），但通常水平居中棋子的最佳方式是刪除浮動並製作每個項目display:inline-block。然後製作包裝text-align: center。例如：

<div id="wrapper"> 
    <div class="logo"></div> 
    <div class="search"></div> 
    <div class="cart"></div> 
</div> 

#wrapper { text-align: center; } 
.logo, .search, .cart { display: inline-block; }

希望這有助於，如果不是請提供一個pastebin或更多的代碼 - 謝謝！

來源

2013-08-18 16:36:20 Michelle

如何通過CSS居中對齊菜單？

回答

相關問題