html - 对齐按钮 - 图标与 html/css/bootstrap 3 中的按钮？

Question

我在我的元素中使用 Bootstrap 3。这是我的 html 页面:

如您所见，星标与下面的查看详细信息 按钮不对齐。这是我的 html 代码

<div class="col-6 col-sm-6 col-lg-4">
              <h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
              <p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
              <p>
                <a class="btn btn-default" href="/search/1799/detail/" role="button">View details &raquo;</a>
                <button type="button" class="bookmark" id="1799" ><span class="
                  glyphicon glyphicon-star-empty "></span></button>
              </p>

            </div><!--/span-->

CSS文件:

button.bookmark {
  border:none;
  background: none;
  padding: 0;
 }

Answer 1

问题是，带有星形图标的 span 已经是一个具有不同高度和行高的行内 block 。 span 周围的按钮也是一个内联 block 元素，这就是它有点复杂的原因。

另一个修复方法是，删除按钮内的跨度并将星形图标中的类添加到按钮，如下所示:

<button class="glyphicon glyphicon-star-empty bookmark">

现在两个按钮的样式相同，添加时它们正确对齐
vertical-align: middle; 到星形按钮。

http://jsfiddle.net/a29hC/