在 Html 中，如何将作为按钮的标签与按钮垂直对齐，以便正确对齐答案

【问题标题】：In Html How do I vertically align label acting as button with button so line up correctly在 Html 中，如何将作为按钮的标签与按钮垂直对齐，以便正确对齐
【发布时间】：2018-10-30 23:57:23
【问题描述】：

如何将标签元素与按钮垂直对齐。

我正在使用这个 hack 使文件按钮看起来像常规引导按钮

Twitter Bootstrap Form File Element Upload Button

问题是按钮不再与常规按钮正确垂直对齐。（如果我用常规按钮元素替换标签元素，它看起来是正确的，但当然它不起作用。

<div style="padding:0.25em">
    <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll(&#x27;ARTWORK_TABLE&#x27;);">
        Select All
    </button>
    <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll(&#x27;ARTWORK_TABLE&#x27;);">
        UnSelect All
    </button>
    <label class="btn btn-outline-secondary">
        Browse
        <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
    </label>
</div>

【问题讨论】：

标签： css html bootstrap-4

【解决方案1】：

使用margin utility class (mt-2) 似乎可行..

<div class="container">
    <div style="padding:0.25em">
        <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
            Select All
        </button>
        <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
            UnSelect All
        </button>
        <label class="btn btn-outline-secondary mt-2">
            Browse
            <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
        </label>
    </div>
</div>

https://www.codeply.com/go/kFHG1BDI1E

【讨论】：