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


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


    text-align: center;

.mp-myheader {
    background: #015688 !important;

.mp-icon-hamburger {
    background-image:       url("");

.mp-icon-xsm {
    width: 25px;
    background-size: 25px;

.mp-float-left {

.mp-float-right {

Solution :

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