如何设置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调一调行吗