Question

我试图在两个Bootstrap按钮内垂直对齐一些字体 - 真棒箭头。

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

如果里面的文字落入一行或包含多个文本，箭头图标应始终调整到按钮总高度的中间位置，如果这是有道理的。

我一直试图将这个问题排除数小时，但对于我的生活，我无法理解这一点。

这是标记：

    <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

将两个元素设置为显示内联块，然后将跨度设置为占用空间的百分比。在这种情况下，90％/ 10％似乎运作良好。

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

要删除填充，您可以这样做：（可能想要添加一些左边的填充）

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

将显示更改为内联块，并删除右浮动：

.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 {}。

Bootstrap 3 - 垂直对齐按钮内的字体 - 真棒图标

1 个答案: