html - 导航栏中的垂直居中文本

Question

我的导航栏在最底部显示文本。我认为 VISA 标志与之冲突。有人可以帮我垂直居中文本吗？

我附上了我正在使用的 CSS 文件和 HTML 文件。文字目前位于栏的底部，高度预设为 67px(我不知道如何自动设置导航栏的高度以使图像和文本垂直居中...

非常感谢

.navbar-default {
  border-color: rgba(34, 34, 34, .05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 100;
  background-color: #fff;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
  max-height: 67px;
}
.navbar-default .navbar-header .navbar-brand {
  text-transform: uppercase;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: #7a96ea;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #4169e1;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: inline;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
  color: #7a96ea;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
  color: #7a96ea!important;
  background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
  background-color: transparent;
}

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top">
        <img src="img/upsidelogo.png" alt="UPside" style=" width:3%; min-height:auto; display:initial;">
        <img src="img/Visa.png" alt="UPside" style=" width:5%; min-height:auto; display:initial;">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a class="page-scroll" href="#Mission">Mission</a>
        </li>
        <li>
          <a class="page-scroll" href="#Features">Features</a>
        </li>
        <li>
          <a class="page-scroll" href="#Join">Join</a>
        </li>
        <li>
      </ul>
    </div>
  </div>
</nav>

<!-- Environment Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 1

删除 display: inline;根据以下规则，原因是您无法在 inline 上设置大小元素。因此，bootstrap 所做的所有奇特的居中操作都将不适用。

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: inline;
}

应该是这样的

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
}

然后将以下规则添加到您的 CSS，并从 <img> 中删除样式属性里面的标签 .navbar-brand .

( Demo )

.navbar-header {
  position: relative;
}
.navbar-brand {
  position: absolute;
  top: 0;
  bottom: 0;
  white-space: nowrap;
}
.navbar-brand::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.navbar-brand img {
  margin: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}