如何在不包括图标的菜单中将文本居中？

Question

我有一个带有 居中文本 的菜单，但我想将图标添加到两个菜单书签。我希望它们在左侧，所以我使用了 "float: left"，但现在由于图标的原因，文本向右移动了一点。

我会在图片上展示这个：

- It was like this:

- Now it's like this:

- And i want that:

我想不出任何巧妙的方法来简单地解决这个问题:/

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 1

试试这个

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

Answer 2

试试这个：

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

}

Answer 3

另一种方法是给父级 li 一个 position:relative; 然后你可以给图像一个 position:absolute; 以及 left 定位。

请在此处查看示例 fiddle：https://jsfiddle.net/jm9qgbcx/

根据您提供的代码，您的 CSS 将如下所示：

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

如何在不包括图标的菜单中将文本居中？

How to center text in menu excluding icon?

html

css

icons

menu

center