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

如下图所示，使用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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin:0;
        }
        ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        .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;
            line-height: 22px;
        }
        .search{
            float: right;
            margin-right:15px;
        } 
        .clearfix:before,
        .clearfix:after{
            content:'';
            display:block;
        }
        .clearfix:after{
            clear:both;
        }
    </style>
</head>
<body>
    <header class="public-header clearfix">
        <div class="container clearfix">
            <img class="header-logo" src="./logo.jpg" alt="logo">
            <div class="header-follow clearfix">
                <button type="button"><span>关注</span></button>
                <span>粉丝</span>
                <span>45</span>
            </div>
            
             <ul class="header-nav clearfix">
                 <li class="item"><a href="#">网易公开课</a></li>
                 <li class="item"><a href="#">云课堂</a></li>
                 <li class="item"><a href="#">中国大学MOOC</a></li>
             </ul>
           
         </div>    
    </header>
</body>
</html>

首先你代码中有浮动，但是没有清除浮动，导致父元素高度塌陷，其次文字的行高可以让文字垂直居中，button那里你可以试试vertical-align

【热门文章】