2

我正在尝试在两个 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（更新）。请注意，图标的红色背景应该触及按钮的边缘（顶部/底部/右侧），而不是现在的位置。

4

1 回答 1

2

将两个元素都设置为显示 inline-block，然后将 span 设置为占用一定百分比的空间。在这种情况下，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 {}use myClass {}。

于 2013-09-09T16:30:09.790 回答