如何将此按钮中的单词更紧密地组合在一起？

Question

我在这里有这个按钮

但是我想把这些单词放在一起，非常正确地放在彼此的顶部，打印图标垂直于它们的右边。我现在一直在摆弄css和html而且我已经走到了尽头。这是我到目前为止所拥有的

<span id="print-report-btn" class="btn btn-primary btn-mini">
    <span style="float:left;">
        <span style="display: block;padding: 0px;margin: 0px;">Huge</span>
        <span style="display: block;padding: 0px;">Report</span>
    </span>
    <span style="float: right;" style="padding: 0px;">
        <img src="images/icons/print.png" width="23" height="23" />
    </span>
</span>

更新：顶级范围中的类是引导按钮样式

Answer 1

改为使图像成为背景图像，然后可以使用line-height属性调整间距。在样式表中放置作为UX一部分的图像而不是HTML

是一种很好的做法

Answer 2

flex的父级上的{p> align-items: center垂直居中，然后更改行高以使文字更紧密。我还将你的文字放在一个元素中。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span id="print-report-btn" class="btn btn-primary btn-mini" style="display: inline-flex; align-items:center;">
    <span>
        <span style="display: block;padding: 0px;margin: 0px; line-height:1;">Huge <br> Report</span>
    </span>
    <span style="padding: 0px;">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" width="23" height="23" />
    </span>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用按钮的line-height属性。

例如：

#print-report-button {
    line-height: 10px;
}

Answer 4

尝试负上边距：

static var prop1: MyProtocol? = nil