Question

我在我的项目中使用Bootstrap 3。这是我的html页面： enter image description here

正如您所注意到的，星星未与下方的view details按钮对齐。这是我的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

问题是，带有星形图标的范围已经是具有不同高度和行高的内联块。围绕跨度的按钮也是一个内联块元素，这就是为什么它有点复杂。

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

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

现在，您为两个按钮设置了相同的样式，并在添加时正确对齐 vertical-align: middle;到星形按钮。

http://jsfiddle.net/a29hC/

Answer 2

尝试将两个图像放在div中并使用vertical-align属性。

示例：

<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>
    <div> <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" style="vertical-align: middle;"></span>
        </button>
    </div>
</div>

Answer 3

可以通过多种方式实现这一目标。我使用以下其中一项：

选项1 - 与顶部的相对位置

button.bookmark {
  border:none;
  background: none;
  padding: 0;
  position: relative;
  top: 2px;

}

<强> Demo

选项2 - 给按钮一个.btn类，使其与旁边的.btn具有相同的布局样式，然后删除左右填充

<button type="button" class="btn bookmark" id="1799" >

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

编辑：请注意，通过Bootstrap，gylphicon的行高为1。使用这种技术我们不希望这样，因为我们希望它匹配.btn。所以这可以被覆盖：

.btn.bookmark .glyphicon {
  line-height: inherit;
  vertical-align: middle;
}

<强> Demo

Answer 4

Bootstrap可能有一些特殊类...但它可能依赖于一组情况。我认为你最好把它当作一个CSS定位问题。

您希望垂直对齐2个元素。显示的元素：inline或inline-block可与vertical-align对齐。您可以阅读HERE。

在您的情况下，您希望这两个元素为display: inline-block，以便您可以像block元素一样为它们赋予形状和位置，并且仍然可以访问某些属性{{1} 1}}元素会有。一旦他们都inline，您就可以将它们与display: inline-block对齐。要记住的两件事是你不希望它们浮动，当我们说它们是对齐的时，它是彼此的而不是它们所在的盒子。

HTML

vertical-align: middle;

CSS

<a href="http://sheriffderek.com" class="button">View Details >></a>
<button class="star">★</button>

这是a jsFiddle

Answer 5

为什么不把星号放在按钮内，让Bootstrap为你调整？您还可以将btn类添加到<a>标记，以将其设置为按钮。少代码：）

<a class="btn btn-default" href="/search/1799/detail/" class="bookmark" id="1799">
    View details <span class="glyphicon glyphicon-star-empty"></span>
</a>

编辑：我提出此建议的原因是个人偏好;我更喜欢让Bootstrap做它的事情而不是添加太多额外的CSS定位，因为它可能会在调整浏览器大小等时阻碍它。

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

5 个答案:

HTML

CSS