Как центрировать выравнивание меню через CSS?

Question

Я хочу, чтобы центр выравнивал поиск, логотип и корзину через 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;, но не удалось.

Answer 1

Я не уверен, что 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; } 

Надеюсь, что это поможет, если нет, пожалуйста, предоставьте пастебин или еще код - спасибо!