В HTML Как вертикальное выравнивание метки, действующей как кнопка с кнопкой, чтобы выстроиться правильно

Question

Как выровнять элемент надписи по вертикали с помощью кнопки.

Я использую этот хак, чтобы кнопка файла выглядела как обычные кнопки начальной загрузки

Кнопка загрузки элемента формы Twitter Bootstrap

Проблема в том, чтокнопка больше не выровнена по вертикали с обычными кнопками.(Если я заменю элемент метки на обычный элемент кнопки, он будет выглядеть правильно, но тогда, конечно, он не будет работать.

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

Answer 1

Использование служебного класса margin (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