Html 尝试将导航栏内容置于中心位置

我目前正在使用Bootstrap，它让我非常头疼。我很难理解它，但我决心使用它，以便能够使我的网站响应，从而支持移动设备

我试图集中我的导航栏内容，但我有最困难的时间这样做。我试过的所有东西它都不会移动，总是固定在右边，两边都留有空白。有人能给我指出正确的方向来解决这个问题吗

*{
框大小：边框框；
}
身体{
背景色：#393939
}
/*
-=-=-导航栏-=-=-
*/
#标题导航{
背景色：#262626；
字体系列：“Kanit”，无衬线；
字体大小：1.1米；
文本转换：大写；
}
.导航链接{
显示：内联块；
颜色：#C9C9C9；
填充：10px；
垫底：10px；
背景：
线性渐变（白色、白色）
底部
/100%0px
不重复；
过渡：0.2s全部；
}
.navlink:悬停{
颜色：#FFF；
文字装饰：无；
背景尺寸：100%4px；
}
.主动{
颜色：#FFF；
}
/*
-=-=-社交媒体-=-=-
*/
.社会偶像{
浮动：对；
字号：1.5em；
填充：0；
}

臭名昭著的家

带有

.navlink

类的元素是内联元素，这意味着它们响应父容器上的

文本align:left | center | right

css属性

<nav id="header-nav" class="navbar-nav">
                <div class="container d-flex justify-content-center">
                    <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
                    <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
                    <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
                    <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--                    <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
                </div>
            </nav>

引导程序有一个类来应用css属性

文本对齐：居中

，它是

文本中心

，将该类应用于容器元素，导航项将居中对齐*

<div class="container text-center">
  <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
  <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
  <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
  <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

---

带有

.navlink

类的元素是内联元素，这意味着它们响应父容器上的

文本align:left | center | right

css属性

<nav id="header-nav" class="navbar-nav">
                <div class="container d-flex justify-content-center">
                    <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
                    <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
                    <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
                    <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--                    <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
                </div>
            </nav>

引导程序有一个类来应用css属性

文本对齐：居中

，它是

文本中心

，将该类应用于容器元素，导航项将居中对齐*

<div class="container text-center">
  <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
  <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
  <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
  <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

---

由于您使用的是bootstrap 4，您可以简单地使用bootstrap 4的flex box实用程序类来居中导航栏链接，在您的情况下，您只需将这些类添加到链接的父容器中，即带有类容器的div

<nav id="header-nav" class="navbar-nav">
                <div class="container d-flex justify-content-center">
                    <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
                    <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
                    <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
                    <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--                    <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
                </div>
            </nav>

在上面的代码中，

d-flex

类将div作为一个flex框，并且

justify content center

将其内容与中心对齐

---

希望有帮助

由于您使用的是bootstrap 4，您可以简单地使用bootstrap 4的flex box实用程序类来居中导航栏链接，在您的情况下，您只需将这些类添加到链接的父容器中，即div with class container

<nav id="header-nav" class="navbar-nav">
                <div class="container d-flex justify-content-center">
                    <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
                    <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
                    <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
                    <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--                    <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
                </div>
            </nav>

在上面的代码中，

d-flex

类将div作为一个flex框，并且

justify content center

将其内容与中心对齐

---

希望有帮助

默认情况下，由于

navlink

元素具有

display:inline block

，您可以向容器

div

添加

text center

类，这些元素将居中

<div class="container text-center">
  ...
</div>

...

默认情况下，由于

navlink

元素具有

display:inline block

，您可以将

文本中心

类添加到容器

div

中，这些元素将居中

<div class="container text-center">
  ...
</div>

...