html - 在 Bootstrap 中向右拉后垂直对齐

Question

我想让向右拉的元素垂直对齐，但是没有成功，网上找了一段时间，有人说还要指定line-height 值，但它对我不起作用。

.float-vertical-align {
  vertical-align: middle;
  line-height: 20px;
  border: 1px solid red;
}

<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" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header"><a href="#" class="navbar-brand">Sample</a>
    </div>
    <div class='pull-right float-vertical-align'>
      <span>Some text here</span>
    </div>
  </div>
</nav>

Answer 1

vertical-align is not meant to be used with block elements .

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. - CSS-Tricks

这是一个可能的解决方案，common pattern垂直居中:

.float-vertical-align {
  border: 1px solid red;

  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

<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" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header"><a href="#" class="navbar-brand">Sample</a>
    </div>
    <div class='float-vertical-align'>
      <span>Some text here</span>
    </div>
  </div>
</nav>