Question

我正在努力弄清如何将徽标居中在页面中间，每当我尝试使用m-auto来使徽标居中时，它将徽标居中在其他项目之间……但不在页面中间。我尝试过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

要使徽标居中，首先要使徽标组织得更好一些，您需要将其设置为列而不是行。因此，电话号码和预订按钮会垂直堆叠。

然后，您需要将区域分成几列，并定义它们的宽度，以使两侧相等，并且剩下的部分居中。即左侧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>

Answer 2

有人问过类似的问题：Center an element in Bootstrap 4 Navbar

我会再回答一次，因为在这种情况下有徽标图像。

<nav class="navbar navbar-light flex-row">
    <div class="d-flex flex-fill">
        <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="d-flex flex-fill justify-content-center">
        <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 class="d-none d-md-flex flex-fill">
        <ul class="navbar-nav ml-auto justify-content-end">
            <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>

另外，check the docs用于正确的Navbar结构，因为您使用切换器的方式，没有expand类或navbar-collapse类都不是标准的Navbar结构

https://www.codeply.com/go/8ik1wexpjI

将徽标居中放置在页面中间，而不是页边空白

2 个答案: