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

在我看来，当人们尝试在块级元素上使用vertical-align并且没有结果时，这种混淆就会出现。如果你在一个较大的div中有一个小div，并希望将较小的div垂直居中，则vertical-align对你没有帮助。 - 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>

Answer 2

vertical-align：middle;属性仅对图像和一行文本有用，使其垂直对齐：中间但是使用bootstrap navbar-right并对其应用填充将是一种方法，或者您也可以应用FlexBox trick使其垂直中间对齐。

Answer 3

修改

或者，只是在摆弄之后，你可以做这样的事情：

注意：我只是模仿计算元素的样式。这个方法没有缩放实用程序，所以你必须添加它（我不会假装它对我有意义，所以我不打算尝试它。）

.navbar-right.navbar-div {
  float: right;
  margin-right: -15px;
  padding: 15px;
}

<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="navbar-right navbar-div">
      Some variety of text
    </div>
  </div>
</nav>

不幸的是，.pull-right命令在boostrap导航上不能很好地工作。

据我所知，bootstrap，这是在屏幕右侧获取纯文本的最快方法。它涉及在.navbar-right元素上使用<ul>以及在.navbar-text元素上使用<span>。

可能有其他方法可以做到这一点，但如果你正在寻找最小的努力，这可能是它。

<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>
    <ul class='nav navbar-nav navbar-right'>
      <li><span class="navbar-text">Right Text</span>
      </li>
    </ul>
  </div>
</nav>

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

3 个答案:

修改