中心图像进入bootstrap 4中的导航头

Question

我使用新的bootstrap 4 alpha frame工作创建了一个navbar标题。

    <nav class="navbar navbar-light navbar-fixed-top pulse-header">
    <ul class="nav navbar-nav navbar-nav-left">
        <li class="nav-item"><a href="#" class="open-pulse-sidebar"><i class="ion-grid pulse-icons"></i></a></li>
    </ul>

    <ul class="nav navbar-nav float-xs-right">
        <li class="nav-item"><a href="#" class="toggle-search"><i class="ion-ios-search-strong pulse-icons"></i></a></li>
        <li class="nav-item">
            <a href="#" class="open-notification-sidebar">
                <i class="ion-earth pulse-icons"></i>
                <span class="pulse-circle"></span>
            </a>
        </li>
        <li class="nav-item"><a href="#" class="open-chat-sidebar"><i class="ion-chatboxes pulse-icons"></i></a></li>
    </ul>
</nav>

CSS

.pulse-header {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  background-color: #1f2532;
  padding: 13px 15px;
}

.pulse-header .navbar-nav-left {
  margin-left: 20px;
}

.pulse-header .nav > .nav-item {
  margin-right: 20px;
}

.pulse-header .nav > .nav-item > a {
  position: relative;
}

我想在导航栏中居中但不知道如何完成它，因为当我戴上时，我右侧的图标正在向下移动。

bootply

Answer 1

你只需要一个css块

以下是我如何实现您正在寻找的工作示例。

我添加了img标记作为nav栏的子标记，然后将其设置为以下代码。

试试这个：

.navbar img {
     display:block;
     margin: 0px auto;
}

如果您开始填充navbar时发现徽标不再居中，请尝试使用此代码作为徽标

或试试这个：

#logo {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

此方法不会自动生成，但如果您的内容需要用于抵消徽标，则此方法可行。

工作示例：http://www.bootply.com/XVlsafgbzD