如何在按钮中拉一点文字

Question

我有一个带图像和文字的简单按钮，但文字没有按图像对齐。

<button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <img class="" style="min-width: 16px;min-height: 16px;width: 16px;height: 16px;" src="/Content/img/cart.png">
    <span>Buy</span> 
    <span class="caret"></span>
 </button>

截图

并且jsfiddle http://jsfiddle.net/e40sb9eg/

Answer 1

在您的文字范围内添加ID ...

<button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
   <img class="" style="min-width: 16px;min-height: 16px;width: 16px;height: 16px;" src="/Content/img/cart.png">
   <span id="btn-text">Buy</span> 
   <span class="caret"></span>
</button>

在CSS中，添加

#btn-text {
    margin-top: 5px; /* Change this value if you want */
}

Answer 2

您可以尝试将文字与图片与vertical-align属性对齐：

＆＃13;

＆＃13;

.btn > * {
    vertical-align: bottom;
}

＆＃13;

<button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <img class="" style="min-width: 16px;min-height: 16px;width: 16px;height: 16px;" src="https://cdn3.iconfinder.com/data/icons/glypho-free/64/cart-alt-20.png">
    <span>Buy</span>
    <span class="caret"></span>
</button>

＆＃13;

＆＃13;

＆＃13;