Question

我的导航栏上的某些文本链接出现问题，左边和右边的边距自动无效，我尝试将显示类型设置为阻止/内联阻止无效。解决方案可能是在我认识的面前盯着我，但我真的无法找到它。

CSS：

.navmenu {
    background-color: #1e1e1e;
    background-image: url("../images/NavBar.gif");
    background-position: top;
    border-top: 1px solid #383838;
    margin-bottom: 5px;
    z-index:105;
}
.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 100%;
    font-size: 28px;
    text-transform: uppercase;
}

HTML：

<div class="navmenu">
    <div class="navlink">
        <a href="index.php">Home</a>
        <a href="http://twitch.tv/" target="_blank">Twitch</a>
        <a href="http://youtube.com/" target="_blank">YouTube</a>
        <a href="http://twitter.com/" target="_blank">Twitter</a>
        <a href="http://facebook.com/" target="_blank">Facebook</a>
        <a href="teamspeak.php">Teamspeak</a>
        <a href="/forum/">Forum</a>
    </div>
</div>

Answer 1

使用flex可以更灵活：

.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }

Answer 2

您似乎将.navlink width设置为100%。将其缩小到其他内容的宽度。我试过了800px，效果很好。

Answer 3

.nav-menu{ width: 100%; text-align: center; }

这对我有用。

Answer 4

您在.navlink

上关注CSS

 .navlink {
  display: flex;
  justify-content: center;
}

.navmenu {
    background-color: #1e1e1e;
    border-top: 1px solid #383838;
    margin-bottom: 5px;
    z-index:105;
}
.navlink {
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
   justify-content: center;
}

.navlink a {
 color: #fff;
}

<div class="navmenu">
    <div class="navlink">
        <a href="index.php">Home</a>
        <a href="http://twitch.tv/" target="_blank">Twitch</a>
        <a href="http://youtube.com/" target="_blank">YouTube</a>
        <a href="http://twitter.com/" target="_blank">Twitter</a>
        <a href="http://facebook.com/" target="_blank">Facebook</a>
        <a href="teamspeak.php">Teamspeak</a>
        <a href="/forum/">Forum</a>
    </div>
</div>

Answer 5

我有另一个非常好的解决方案

<div id="nav">
    <span><a href="#">Twitter</a></span>
    <span><a href="#">Facebook</a></span>
    <span><a href="#">YouTube</a></span>
</div>


<!--Css style sheet for above code-->
#nav{
   width:100%;
   text-align:center;
}
#nav span a{
   text-decoration:none;
   padding:10px;
}

Answer 6

将text-align:center;添加到您的nav-link班级

.nav-link
{
text-align:center;
}

Answer 7

尝试：

.navlink { text-align:center }

Answer 8

顶部徽标居中，因为它具有固定宽度。导航栏未居中，因为它是屏幕宽度的100％。如果你使这个百分比较低或使用与徽标图像相同的固定宽度，那么它将在中心工作。

.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 1024px;
    font-size: 28px;
    text-transform: uppercase;
}

CSS中心导航栏链接

8 个答案: