html - How to center text in menu excluding icon? -

i have menu centered text in it, want add icons 2 of menu bookmarks. wanted them on left, used "float: left" text moved little bit right because of icon.

i'll show on pictures:

- this:

- it's this:

- , want that:

i cant come clever idea solve problem in simple way :/

html:

<ul>     <li><a href="ofirmie.php" <?php if ($choosen == 0) {echo ' class="current" ';} ?> > <img src="structure/home.png" class="icon"> home</a></li>     <li><a href="oferta.php" <?php if ($choosen == 1) {echo ' class="current" ';} ?> >oferta</a></li>     <li><a href="realizacje.php" <?php if ($choosen == 2) {echo ' class="current" ';} ?> >nasze realizacje</a></li>     <li><a href="kosze.php" <?php if ($choosen == 3) {echo ' class="current" ';} ?> >kosze gabionowe</a></li>     <li><a href="sport.php" <?php if ($choosen == 4) {echo ' class="current" ';} ?> >sport</a></li>     <li><a href="kontakt.php" <?php if ($choosen == 5) {echo ' class="current" ';} ?> >kontakt</a></li>     <li><a href="ofirmie_en.php" <?php if ($choosen == 6) {echo ' class="current" ';} ?> >english version</a></li> </ul> 

css

/*  ---- menu ---- */  #navi {     width: 200px;     float: left;     padding: 15px 5px 15px 5px;     margin-bottom: 10px;     border-radius: 10px;     -webkit-border-radius: 10px;     -moz-border-radius: 10px;     box-shadow: 0px 0px 20px 2px #bfe0eb;     -webkit-box-shadow: 0px 0px 20px 2px #bfe0eb;     -moz-box-shadow: 0px 0px 20px 2px #bfe0eb; }  #navi ul {     list-style-type: none;     margin: 0;     padding: 0;     text-align: center;     font-size: 20px;     line-height: 2em; }  #navi li {     border-bottom: 1px solid #5dbcd2;  }  #navi ul:first-child {     border-top: 1px solid #5dbcd2; }  #navi {     color: #696969;     text-decoration: none;     display: block;     transition-duration: 0.5s; }  #navi a:hover, #navi a.current {     color: white;     background-color: #319fe8; }  img.icon{     float: left;     width: 24px;     height: 24px; } 

another way of doing give parent li position:relative; , can give image position:absolute; along left positioning.

see example fiddle here: https://jsfiddle.net/jm9qgbcx/

based on provided code, css this:

#navi li {     border-bottom: 1px solid #5dbcd2;     position:relative; } img.icon {     position:absolute;     left:5px; }