Question

我有一个表格，其中包含一行中的以下元素：

<td align="left">
    <input
        type="button"
        class="buttonQUAL" onclick="toggleById('x1'); toggleById('x2'); return true;"
        onMouseOver="this.style.cursor='hand'"
        value="XXXX">
    <div id="x1" class="listQUAL" style="display:none">
        CORP<br>
        PREV<br>
    </div>
</td>
<td>
    <br>
    <div id="x2" class="listQUAL" style="display:none">
        Corporate Action Reference<br>
        Previous Message Reference
    </div>
</td>

该按钮切换div元素的可见性。我希望垂直对齐完全可见的文本行，所以我在css中设置了以下内容（请注意，切换文本的字体大小稍小）：

input.buttonQUAL {
    padding:0px;
    border:0px;
    margin-left:4px;
    margin-top: 0px;
    margin-bottom: 0px;
}
div.listQUAL {
    font-size: 90%;
}

通过删除填充，边框和垂直边距，我希望现在已经实现对齐是正确的（注意第一个br元素在div之外，因此具有100％的字体大小，与按钮相同）。对于未经训练的人来说，它看起来确实没问题。

这一切是正确的还是会有一些错位，可能是一个像素的一小部分？这会在所有浏览器类型中表现良好吗？左边距是4像素，我尝试将aline按钮值文本和切换文本保持正确吗？

Answer 1

如果您附上截图以便我能理解，会更好但是，您可以在div类中尝试css的 line-height 属性。设置行高等于div的高度，将内部元素设置在div的中心。

例如：

div.listQUAL {
    height: 30px; line-height: 30px; font-size: 90%;
}

试一试。

Answer 2

鉴于输入字段始终呈现为本机UI元素，您无法准确预测其大小，也无法匹配单个<br>。

我建议到目前为止最简单的解决方案，特别是因为你已经在使用表格，就是将出现的div放在一个单独的<tr>上，它会自动垂直对齐它们从同一个点开始，并且<input>和<br>是否具有相同的高度并不重要，如果没有启用样式表，它实际上会起作用。

使用文本和按钮的混合时，在td元素内垂直对齐

2 个答案: