如何在引导程序中正确对齐品牌形象

Question

它不是this 的副本。这个问题是关于用图像替换文本徽标。这个问题是关于在文本徽标之外放置图像。

我有以下引导代码，它试图显示站点徽标及其名称。我正在使用引导类 navbar-brand 这样做：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
                <img src="./EnterpriseCopy_files/android-icon-48x48.png">
            </a>
            <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
        </div>
        <div class="navbar-collapse collapse">

标志最终看起来像这样：

然后我必须将style="margin-top:-13px" 添加到img 标签中，以便将图像向上推并使其看起来不错：

这不是正确的做法。有没有更好的方法来做到这一点？

原始代码here，其中一个带有样式调整here。

Answer 1

问题在于.navbar-brand 有填充：

padding: 15px 15px;

它是引导程序的默认样式。所以删除它并给出：

.navbar-brand {padding: 0;}

你已经准备好了。看截图，我给了padding: 0; 看看它的工作原理：

Answer 2

如果想在 navbar-brand 类中添加图像和文本而不是将它们分开，请将 display: inline-block 应用于您的 img，然后调整 navbar-brand 本身的填充以适应所有内容。

.navbar .navbar-brand {
  padding: 2px 15px;
}

.navbar .navbar-brand img {
  display: inline-block;
}

查看工作片段。

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
/* Wrapping element */

/* Set some basic padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */

input,
select,
textarea {
  max-width: 280px;
}
/* Carousel */

.carousel-caption {
  z-index: 10 !important;
}
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .carousel-caption {
    z-index: 10 !important;
  }
}
/**ADDED CSS**/

.navbar .navbar-brand {
  padding: 2px 7.5px;
}
.navbar .navbar-brand img {
  display: inline-block;
}
/**ADDED CSS**/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
        <img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Mailbox</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Copy Groups</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Home</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://localhost:44302/#">bar@foo.com</a>
        </li>
        <li><a href="https://localhost:44302/Account/SignOut">Sign Out</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

对我来说，在两个锚元素上设置类 d-inline-block 和 align-middle 都有效。我正在使用引导程序 4.3.1。