Question

我正在制作导航栏，我想将徽标固定在导航栏的中央。我以某种方式做到了，但是当我进入移动屏幕时，徽标并不完全位于中心，而当我按下汉堡菜单时，徽标就会向下移动。
我该如何解决，请帮帮我吗？

<nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color:transparent">
  <div class="container-fluid">
    <a class="navbar-brand neon" routerLink="/home">Shams Ali</a>
    <img class="img-fluid mr-auto logo" src="assets/logo.png"/>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/home">Home</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/project">Projetcs</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/about">About Me</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/contact">Contact Me</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

.logo {
  margin: 0 auto;
  display: block;
  position: fixed;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

Answer 1

实际上，您只需要设置最高位置即可：

CSS ：

.logo {
  margin: 0 auto;
  display: block;
  position: fixed;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
  top: 15px;
}

小提琴：https://www.codeply.com/p/5Cq8gytisY

Answer 2

尝试将其添加到您的样式中：

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我正在尝试将徽标固定在导航栏的中心

2 个答案: