對齊按鈕-html / css / bootstrap 3中的按鈕圖標？

Question

我在項目中使用Bootstrap 3。 這是我的html頁面：

您會注意到，星形未與下面的“ 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

問題是，與星形圖標跨度已經是 inline-block的不同高度和行高。 包圍范圍的按鈕也是一個內聯塊元素，這就是為什么它有點復雜的原因。

另一個解決方法是，刪除按鈕內的跨度，然后將星形圖標中的類添加到按鈕中，如下所示：

<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;

}

演示版

選項2-為按鈕提供一個.btn類，使其與旁邊的.btn具有相同的布局樣式，然后刪除左右填充

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

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

編輯：請注意，gylphicon由Bootstrap賦予行高1。 使用此技術，我們不需要它，因為我們希望它與.btn相匹配。 這樣就可以覆蓋：

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

演示版

Answer 4

Bootstrap可能為此具有一些特殊的類...但是它可能取決於一系列情況。 我認為您最好將其視為CSS定位問題。

您要垂直對齊2個元素。 顯示的元素： inline或inline-block可以與vertical-align 。 您可以在此處閱讀有關內容。

在您的情況下，您將希望顯示兩個元素display: inline-block以便您可以像block元素一樣賦予它們形狀和位置，並且仍然可以訪問inline元素具有的某些屬性。 一旦它們都display: inline-block您可以將它們與vertical-align: middle; 。 要記住的兩件事是您不希望它們浮動，並且當我們說它們對齊時，它們是彼此而不是它們所位於的盒子。

的HTML

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

的CSS

a { /* reset a */
    text-decoration: none;
    color: inherit;
}

.button {
    display: inline-block;
    padding: .5em;
    border: 1px solid black;
    border-radius: 5px;
    vertical-align: middle;
}

.star {
    background: transparent;
    border: 0;
    display: inline-block;
    vertical-align: middle;
}

這是一個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位置，因為這可能會在調整瀏覽器大小等時妨礙您的工作。