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

希望这有帮助，如果没有请提供一个或更多代码 - 谢谢！

如何通过CSS中心对齐菜单？

1 个答案: