html - Bootstrap 3 - 垂直对齐按钮内的超赞字体图标

Question

我正在尝试在两个 Bootstrap 按钮内垂直对齐一些 Font Awesome 箭头。

实际上，文本和图标都应该在按钮中间垂直对齐。

如果里面的文本落在一行或多行中，箭头图标应始终调整到按钮总高度的中间，如果这样的话。

几个小时以来，我一直在努力解决这个问题，但我终究还是想不通。

这是标记:

    <div class="container">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
            <button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
          </div>
</div>

这是一个jsFiddle (更新)我目前拥有的。请注意，图标的红色背景应该触及按钮的边缘(顶部/底部/右侧)，而不是现在的样子。

Answer 1

将两个元素设置为显示 inline-block，然后将 span 设置为占据空间的百分比。在这种情况下，90%/10% 似乎效果不错。

span {
    vertical-align:middle;
    display:inline-block;
    width:90%;
}

要删除填充，您可以这样做:(可能想添加一些左侧填充)

.btn-foo1,
.btn-foo2 {
    padding:0;
    border:0;
}

将显示更改为内联 block ，并删除右侧 float :

.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=" icon-"] {
  background-color: red;
  display:inline-block;
  vertical-align:middle;
  padding:24px;
  width:10%;
}

演示:

http://jsfiddle.net/9brbD/19/

此外，我会向跨度添加一个类，而不是使用 span {}，而是使用 myClass {}。