为什么我的导航栏中的文本没有居中？ [复制]答案

【问题标题】：Why is the text in my navbar not centering? [duplicate]为什么我的导航栏中的文本没有居中？ [复制]
【发布时间】：2021-02-23 19:46:15
【问题描述】：

我有两个导航栏，其中一个我希望文本居中，但我无法理解为什么我这样做不成功。我对导航栏和引导程序都很陌生，所以如果我的错误很明显，我深表歉意。它是我应该在引导端实现的东西，还是可以在<style> 标签中解决的东西？谢谢。

<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
    <ul class="nav navbar-nav navbar-center">
        <li class="nav-item active">
            <a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
        </li>
    </ul>
</nav>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

IMO，Bootstrap 太难了。我使用原始 CSS JS 和 HTML，但我会尽力提供帮助。

Bootstrap 在他们的网站上有这个例子：

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

这应该是你要找的。p>

您还可以在原始 HTML/CSS/JS 中实现导航栏：

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" src="index.css">
    <title>Navbar</title>
</head>
<body>
    <navbar>
        <button onclick="window.location.href = '#'" class="active">Something</button>
        <button onclick="window.location.href = '#'">Something else</button>
        <button onclick="window.location.href = '#'">A third thing</button>
    </navbar>
</body>
</html>

/* index.css */
navbar {
    width: 100%;
    height: 10%;
    background-color: #d4d4d4;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
}

navbar>button {
   color: #00ccff;
}

navbar>button.active {
    color: #00ccff;
}

【讨论】：