在引导程序中右拉后垂直对齐

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不打算与块元素一起使用。

在我看来，当人们尝试在块级元素上使用垂直对齐但没有结果时，就会产生混乱。如果您在较大的 div 中有一个小 div 并希望将较小的 div 垂直居中，则 vertical-align 将无济于事。- CSS 技巧

这是垂直居中的可能解决方案和常见模式：

.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>