css - 将 Logo 居中在页面中间，而不是页边距中间

Question

我正在努力弄清楚如何使我的 Logo 在页面中间居中，每当我尝试使用 m-auto 时，它都会使 Logo 在其他元素之间居中.. . 但不是页面。我试过 right:... 方法，但没有成功。

这是我的代码:

.navbar-nav {
  flex-direction: row !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>


  <ul class="navbar-nav m-auto">
    <a class="navbar-brand" href="#">
      <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
    </a>
  </ul>

  <div class="d-none d-md-block">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item mr-2 pr-4 my-auto">
        <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
      </li>
      <li class="nav-item">
        <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

要使 Logo 居中，首先要更好地组织它，您需要将其设为列而不是行。所以电话号码和预订按钮垂直堆叠。

然后您需要将这些区域分成几列并定义它们的宽度，使两侧相等，剩下的部分居中。即左 25% 中间 50% 和右 25%。

这是片段。

.navbar-nav {
  flex-direction: column !important;
  justify-content: center;
}

.side {
  width: 25%;
}

.middle {
  width: 50%;
  display: flex;
  justify-content: center;
}

.flexend {
  display: flex;
  justify-content: flex-end;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />


<nav class="navbar navbar-light bg-light">
  <div class="side">
    <button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div class="middle">
    <div class="logo">
      <a class="navbar-brand" href="#">
        <img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
      </a>
    </div>
  </div>

  <div class="side flexend">
    <div class="d-none d-md-block">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-2 pr-4 my-auto">
          <a href="tel:+1833555555" class="nav-link" style="font-size: 20px;"><i class="icon-phone mr-1"></i>0122323232323</a>
        </li>
        <li class="nav-item">
          <a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>