是否有任何内置方法可以将文本与引导程序中的右对齐按钮垂直对齐答案

【问题标题】：Are there any built in ways to vertically align text with right aligned button in bootstrap是否有任何内置方法可以将文本与引导程序中的右对齐按钮垂直对齐
【发布时间】：2015-04-13 19:00:47
【问题描述】：

当您“向右拉”按钮时，是否有任何简单的非 hacky 方法可以将列表组项中的文本与按钮中的文本垂直对齐？

这适用于面板标题，几乎可以在任何您希望按钮与文本内联但右对齐的地方...

例子：

'item'文本高于按钮文本。

<ul class="list-group">
  <li href="#" class="list-group-item clearfix">
      <button class="btn btn-default pull-right">Button 1</button>
      item1
  </li>
  <li href="#" class="list-group-item clearfix">
      <button class="btn btn-default pull-right">Button 2</button>
      item2
  </li>
</ul>

按钮没有右对齐:(

<ul class="list-group">
  <li href="#" class="list-group-item clearfix">
      item1
      <button class="btn btn-default">Button 1</button>
  </li>
  <li href="#" class="list-group-item clearfix">
      item2
      <button class="btn btn-default">Button 2</button>
  </li>
</ul>

文本旁边的空按钮！

<ul class="list-group">
  <li href="#" class="list-group-item clearfix">
      <button class="btn btn-default pull-right">Button 1</button>
      item1
      <button class="btn btn-link">&nbsp;</button>
  </li>
  <li href="#" class="list-group-item clearfix">
      <button class="btn btn-default pull-right">Button 2</button>
      item2
      <button class="btn btn-link">&nbsp;</button>
  </li>
</ul>

http://jsfiddle.net/2ofya1n4/

【问题讨论】：

我认为line-height 和（或）transform: translateY() 是你的朋友。诚然，这个问题对我来说有些不清楚。如果文本位于跨度或段落内，则可以更好地定位文本。
你试过 text-right 引导类吗？
猜猜我的问题实际上是关于一些内置的引导类可以解决这个问题。有很多方法可以使用行高等等。我认为创建一个特殊的类（或classes) 让容器采用正确的高度和对齐方式作为 btn，以便它可以对高度等使用相同的较少变量。
@GuyBowden is 是实现这一目标的一种引导方式，但它是为内联表单设计的，其中有一个 <form> 元素和 form-horizontal 类，包含一个 @ 987654330@ 元素与 control-label 类名。它所做的就是将padding-top: 7px 添加到标签中。请参阅：jsfiddle.net/hashem/2ofya1n4/5（请注意，框的display 的计算值应为block 或inline-block 以使padding-top 工作）。

标签： html css twitter-bootstrap

【解决方案1】：

把你的文本放在 span 里面，然后给 span display:table-cell 和 vertical-align:middle 喜欢：

span {
    display: table-cell;
    height: 35px;
    vertical-align: middle;
}

查看Fiddle here.

【讨论】：

【解决方案2】：

我认为你可以使用line-height line Shikkediel 说的。我在前两个 li 元素中添加了 line-height 类。
检查JSFiddle

【讨论】：