时间戳

首页 > 解决方案 > 为什么菜单不移到中心？

html - 为什么菜单不移到中心？

问题描述

这是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

这是CSS

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

我什至尝试使用普通的 css 来完成它，在 Bootstrap 文档中它说要添加类 justify-content-center ，我也尝试添加 nav 类但仍然无法正常工作。知道如何解决吗？还忘了提到我确实希望徽标留在左侧的位置。

标签： htmlcssbootstrap-5

解决方案

尝试这样的事情：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div style="justify-content: center;" class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

CSS：

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

您只需要添加 style="text-align: center;"您的菜单<a> ，结果如下所示： 在此处输入图像描述

最后看起来像： 在此处输入图像描述

推荐阅读