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

【问题标题】：How to center text in menu excluding icon?如何在不包括图标的菜单中居中文本？
【发布时间】：2016-10-15 04:18:43
【问题描述】：

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

我只会在图片上展示这个：

- 是这样的：

- 现在是这样的：

- 我想要那个：

我想不出任何巧妙的办法以简单的方式解决这个问题：/

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

【问题讨论】：

将background-image 用于li 或a，而不是插入图像

标签： html css menu icons center

【解决方案1】：

试试这个

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

【讨论】：

重点是使文本居中，而不是图标。当有一个图标时，文本向右移动 24 像素，我不想要那个
请检查这个新的
Frits 更快，我也需要这个：#navi li {position:relative;} 但是谢谢回答:)

【解决方案2】：

执行此操作的另一种方法是为父级li 提供position:relative;，然后您可以为图像提供position:absolute; 以及left 定位。

在此处查看示例小提琴：https://jsfiddle.net/jm9qgbcx/

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

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

【讨论】：

谢谢，它有效！我之前尝试过 position: absolute，但我忘记了将父元素更改为 position: relative。
太棒了！我很高兴它有帮助:)

【解决方案3】：

试试这个：

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

}

【讨论】：

重点是使文本居中，而不是图标。当有一个图标时，文本向右移动 24 像素，我不想要那个。