在引导程序 4 中将图像居中到导航标题中答案

【问题标题】：center image into nav header in bootstrap 4在引导程序 4 中将图像居中到导航标题中
【发布时间】：2017-03-22 12:42:42
【问题描述】：

我使用新的 bootstrap 4 alpha 框架创建了一个导航栏标题。

    <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

【问题讨论】：

喜欢这个？ ---> stackoverflow.com/questions/23400234/…
这就是你暂时在nav里的全部内容了吗？

标签： html css

【解决方案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

【讨论】：