html - 如何使 div 中的图标始终居中？

<分区>

我试图将一个图标置于标题导航的中心。我掌握了基础知识，但中心会根据同一标题中是否有多个图标而变化。

即使删除了左边或右边的图标，我怎样才能使中心图标居中？

Here is a fiddle demonstrating the issue

HTML

<br>   
<br>   
<div class="mp-myheader">
        <div class="mp-center-wrapper">
            <i class="mp-icon-hamburger mp-icon-xsm mp-float-left"></i>
            <i class="mp-icon-hamburger mp-icon-xsm"></i>
            <i class="mp-icon-hamburger mp-icon-xsm mp-float-right"></i>
        </div>
    </div>

<br>
    <div class="mp-myheader">
        <div class="mp-center-wrapper">
            <i class="mp-icon-hamburger mp-icon-xsm"></i>
            <i class="mp-icon-hamburger mp-icon-xsm mp-float-right"></i>
        </div>
    </div>

CSS

.mp-center-wrapper{
    text-align: center;
}

.mp-myheader {
    background: #015688 !important;
    width:100%
}

.mp-icon-hamburger {
    background-image:       url("http://icons.iconarchive.com/icons/klukeart/summer/128/hamburger-icon.png");
    background-position:center;
    background-repeat:no-repeat;
}

.mp-icon-xsm {
    width: 25px;
    height:25px;
    background-size: 25px;
    display:inline-block;
}

.mp-float-left {
    float:left;
}

.mp-float-right {
    float:right;
}

最佳答案

http://jsfiddle.net/es_kaija/7Ln420jo/1/

将 position: relative; 用于标题和左右图标:position: absolute; 和 left: 0;右边:0;

帮我解决了这个问题。

关于html - 如何使 div 中的图标始终居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33303713/