如何通过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居中对齐菜单？

回答

相关问题