How to center icons in div consistently? [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

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


Solution :

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.


    CSS Howto..

    How do I keep my background image at the bottom of the page?

    IE10 has extra margin above an inline header. How do I remove it?

    How does one create a div that extends to the bottom of the page?

    slideshow banner without using flash

    How to make blur effect without white light?

    How to make a border in css that is actually on the very edges

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    CSS form with side by side fields…how to align the labels and fields vertically?

    How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?

    How does a document reference an SCSS file?

    How to align text next to a “div” in HTML/CSS?

    How to pre-load images only using CSS (no JS)?

    How to “float” an absolutely positioned element div out of its container

    show,hide DIV with mouseover , mouseout

    CSS, how to put a div inside a div that is responsive?

    How to get less to output a css variable with quotes

    How to create folder style in CSS

    How to load a local copy of a generic CSS file when CDN is down? [duplicate]

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    How to change class of all children with jquery?

    css: How to float div according to 2nd div in hierarchy

    How to “zoom”/“scale” in div's content with css or jquery?

    How to make maintaince document for a website?

    How to achieve this complex layout with CSS?

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How to make this breed of resizable vertical divider for two divs?

    How to target a specific div out of 4 divs with the same class with CSS

    Chrome inspector not showing body outline correctly

    Css Tricks - How to align 4 div's

    How to give space between each tab in the navigation using Jquery and CSS