CODEWITHSUNDEEP
htmlcssmenuiconscenter
kkamil4sz
kkamil4sz

Reputation: 543

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:

- It was like this:

enter image description here

- Now it's like this:

enter image description here

- And i want that:

enter image description here

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

Upvotes: 1

Views: 261

Answers (3)

Mukesh Ram
Mukesh Ram

Reputation: 6338

Try This: 

#navi li {        
    position:relative;
    padding-left:30px;
}
img.icon {
   position:absolute;
   width: 24px;
   height: 24px;
   top:8px;
   left:5px

}

Upvotes: 1

Ravi Sukhadia
Ravi Sukhadia

Reputation: 441

Try This

img.icon {
    width: 24px;
    height: 24px;
    padding-top: 8px;
    position: absolute;
    left: 18px;
}

Upvotes: 3

Frits
Frits

Reputation: 7624

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

Upvotes: 1

Related Questions