How to center icons in div consistently?

Question

I am trying to center an icon in my header navigation. I have the basics down but the center changes depending on if there are multiple icons in the same header.

How can I keep the center icon centered even if the left or right icons are removed?

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

score 4 · Accepted Answer · answered Oct 23 '15 at 13:42

4

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

Put position: relative; for your headers and for right and left icons: position: absolute; and left: 0; and right: 0;

Fixed that for me.

answered Oct 23 '15 at 13:42

Kristine

737
2
9
22

1

Was just about to answer the same thing. Also remember to remove `float` from them. – Roope Oct 23 '15 at 13:43

score 0 · Answer 2 · answered Oct 23 '15 at 13:49

.mp-center-wrapper {
  overflow: auto;
  text-align: center;
}
.mp-myheader {
  background: #015688 !important;
  width: 100%;
  position: relative;
}
.mp-icon-hamburger {
  background-image: url("http://icons.iconarchive.com/icons/klukeart/summer/128/hamburger-icon.png");
  background-position: center;
  background-repeat: no-repeat;
}
.center {
  /* created this new class and applied to middle hamburger icon */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.mp-icon-xsm {
  width: 25px;
  height: 25px;
  background-size: 25px;
  display: inline-block;
}
.mp-float-left {
  float: left;
}
.mp-float-right {
  float: right;
}

<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 center"></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 center mp-icon-xsm"></i>
    <i class="mp-icon-hamburger mp-icon-xsm mp-float-right"></i>

  </div>
</div>

Check this code, and read the comments in CSS

score -1 · Answer 3 · answered Oct 23 '15 at 13:38

-1

Add margin: 0 auto; for your middle icon (.mp-icon-xsm)

.mp-icon-xsm {
    margin: 0 auto;
}

answered Oct 23 '15 at 13:38

Dejan Munjiza

790
1
12
23

@Kristine are you sure? Is this what you was asking about: http://jsfiddle.net/p7zLusb1/3/ – Dejan Munjiza Oct 23 '15 at 13:48
I tried in the original fiddle and it is not working. – Kristine Oct 23 '15 at 13:49
I just used it in original fiddle and it worked. – Dejan Munjiza Oct 23 '15 at 13:50
Well good for you. Margin:auto does not work on inline-block. – Kristine Oct 23 '15 at 13:53
Parent has text-align: center; – Dejan Munjiza Oct 23 '15 at 14:01

How to center icons in div consistently?

3 Answers3