css - 我怎样才能在 中居中一个

Question

我有一个由列表组成的顶级菜单。全部<li>尽管我想将 <li> 居中，但 s 居中取决于文本s 然后是 <li> 的其余部分s 应该在两侧居中。我想使图像居中。

顶部菜单如下所示:

<div id="topMenu">
    <ul>
      <li><a href="index.php">Forside</a></li>
      <li><a href="matches.php">Kampe</a></li>
      <li><a href="squad.php">Truppen</a></li>
      <li><a href="index.php"><img id="logoMenu" src="images/logo.png"></a></li>  
      <li><a href="#">Galleri</a></li>
      <li><a href="#">Statistik</a></li>
      <li><a href="about.php">Om Klubben</a></li>
    </ul>
</div>

然后我有一些 CSS:

#topMenu {
    background: #51a047;
    width: 100%;
    height: 50px;
    line-height: 25px;
    margin: 0 auto;
}

#topMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    text-align: center;
}

#topMenu li {
    display: inline;
    padding: 0 20px;
    text-transform: uppercase;
}

#logoMenu {
    background-image: url("images/logo.png");
    width: 80px;
}

#topMenu img {
    vertical-align: text-top;
}

这是一个 jsFiddle

Answer 1

就我个人而言，我不会将 Logo 作为导航元素。从语义上讲，它没有意义，而且很难设计。如果将菜单项分成两个 UL，您可以执行以下操作:

HTML

<div id="topMenu">
    <ul id="menu-left">
        <li><a href="#">AAA</a></li>
        <li><a href="#">BBB</a></li>
        <li><a href="#">CCC</a></li>
    </ul>
    <a href="#" id="logoMenu"><img src="URL" /></a>
    <ul id="menu-right">
        <li><a href="#">DDD</a></li>
        <li><a href="#">EEE</a></li>
        <li><a href="#">FFF</a></li>
    </ul>
</div>

CSS

#topMenu {
    background: #51a047;
    width: 100%;
    height: 50px;
    line-height: 25px;
    margin: 0 auto;
    position: relative;
}

#topMenu ul {
    list-style-type: none;
    text-align: center;

    margin: 0;
    padding: 10px;

    box-sizing: border-box; /* percentage width + padding */
    width: 45%;
    position: absolute;
    top: 0;
}

#topMenu #menu-left {
    left: 0;
}
#topMenu #menu-right {
    right: 0;
}

#topMenu li {
    display: inline;
    padding: 0 20px;
    text-transform: uppercase;
}

#topMenu a {
    color: white;
    text-decoration: none;
}

#logoMenu {
    display: block;
    width: 10%;
    margin: 0 auto; /*center*/
}

#topMenu img {
    margin: 0 auto;
    display: block;
    max-height: 100%;
    max-width: 100%;
}

https://jsfiddle.net/vvu5k79r/2/