CSS 中心导航栏链接答案

【问题标题】：CSS Center nav bar linksCSS 中心导航栏链接
【发布时间】：2014-10-07 07:24:03
【问题描述】：

在我的导航栏上无法将某些文本链接居中，左右边距自动不起作用，我尝试将显示类型设置为块/内联块无济于事。解决方案可能正盯着我的脸，我知道但我真的找不到。

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>

【问题讨论】：

如果有任何答案解决了您的问题，请考虑通过单击复选标记并投票来接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

标签： html css alignment center

【解决方案1】：

将text-align:center; 添加到您的nav-link 类中

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

【讨论】：

【解决方案2】：

试试：

.navlink { text-align:center }

【讨论】：

干杯，知道这将是愚蠢的简单，总是想太多。
虽然这可行，但请注意，如果您将页面缩小得太薄，它可能看起来很奇怪。

【解决方案3】：

看起来您正在将 .navlink width 设置为 100%。将其缩小到其余内容的宽度。我试过800px，效果很好。

【讨论】：

这对我来说似乎是基于问题的正确解决方案。页面应该更好地结合在一起。

【解决方案4】：

顶部徽标居中，因为它具有固定宽度。导航栏没有居中，因为它是屏幕宽度的 100%。如果您将其设置为较低的百分比或使用与徽标图像相同的固定宽度，那么它将居中。

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

【讨论】：

嗯，我用文本对齐中心修复了它，但我会记住这一点，干杯。
我不知道为什么这被否决了。导航栏有一个固定宽度的图像，不能缩小。

【解决方案5】：

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

这对我有用。

【讨论】：

【解决方案6】：

我有另一个很好的解决方案给你

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

【讨论】：

【解决方案7】：

使用 flex 让它更灵活：

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

【讨论】：

【解决方案8】：

您在 .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>

【讨论】：