如何设置CSS使元素在一行居中对齐显示

Question

如下图所示，使用float设置后，发现元素没有在一行上居中对齐显示，求解大牛~对应html如下：<header class="public-header">        <div class="container">            <div class="header-logo">                 <img src="images/logo.png" alt="logo">             </div>             <div class="header-follow">                <button type="button"><span>关注</span></button>                <span>粉丝</span>                <span>45</span>            </div>                          <ul class="header-nav">                 <li class="item"><a href="#">网易公开课</a></li>                 <li class="item"><a href="#">云课堂</a></li>                 <li class="item"><a href="#">中国大学MOOC</a></li>             </ul>             <div class="search">                 <img src="images/search.png" alt="search">             </div>         </div>        </header><!-- /header -->对应CSS:.header-logo{    float: left;    margin-right: 30px;}.header-follow{    float: left;    margin-right:15px;}.header-nav li a{    float: left;    margin-left:56px;     font-size: 16px;}.search{    float: right;    margin-right:15px;}

Answer 1

可以先将header-logo这个div设置为相对定位，position:relative，然后在设置margin-top。

.header-logo{
    float: left;
    margin-right: 30px;
    position:relative;
    margin-top:5xp;    //这个根据具体情况调整
}

Answer 2

设置了浮动，居中就没有用了，这个你慢慢移动吧。

Answer 3

加下高度 行高应该就可以了吧

Answer 4

文字图片居中对齐

 header * {vertical-align:middle;} 

文字垂直居中 

line-height:"父级盒子高度";

你这样的情况

margin:top,或padding-top,试试

Answer 5

display:table  这个能用在这个上面吗

Answer 6

把图片的margin-top调一调行吗