css微调器垂直对齐

Question

我在尝试中间垂直对齐位于表格中的微调器图标时遇到问题，但布局在不同的浏览器中完全不同。

知道如何解决这个问题吗？

谢谢！

<tr>
    <td style="vertical-align: middle;">
        <span style="width: 160px;display: inline-block;">Tests to run: 
            <div style="display: inline;font-weight: bold;" id="amounttcp___localhost_7222queue_sample">1</div>
        </span>
        <span style="font-weight: bold;text-align: right;">
            <button onclick="testRequestReply('tcp://localhost:7222','queue.sample','tcp___localhost_7222queue_sample');" type="button" id="buttontcp___localhost_7222queue_sample" class="button_example" style="display: inline-block;width:190px" disabled="disabled">Run Test</button>
        </span>
    </td>
    <td style="vertical-align: middle;">
        <div id="tcp___localhost_7222queue_sample" class="loading" style="height: 55px;">
            <span style="display: block;margin-left: 60px!important;margin-top:18px">Waiting for reply...</span>
        </div>
    </td>
</tr>


.loading {
    background-image: url("/emsACL/images/Indeterminate-Spinner-Gray.gif");
    background-repeat: no-repeat;
    background-size: 50px 50px;
    display: inline-block;
    margin-top: -3px;
    position: relative;
    vertical-align: middle !important;
}