kkamil4sz kkamil4sz - 5 months ago 9
HTML Question

How to center text in menu excluding icon?

I have a menu with centered text in it, but i want to add icons to two of the menu bookmarks. I wanted them to be on the left, so i used "float: left" but now text is moved a little bit to the right because of the icon.

I'll just show this on pictures:



I cant come up with any clever idea to solve this problem in a 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 a {
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;
}

Answer

Another way of doing this would be to give the parent li a position:relative; and then you can give the image a position:absolute; along with left positioning.

See an example fiddle here: https://jsfiddle.net/jm9qgbcx/

Based on your provided code, your CSS would look like this:

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