【发布时间】：2016-07-29 01:56:15
【问题描述】：
我需要完美对齐“文本第一”和“文本第二”。第二个文本在表格内。我需要以这种方式使我的程序与稍后添加的功能一起工作。我在垂直对齐方面遇到了麻烦，因为它会根据我使用的浏览器给我不同的结果。是我做错了什么，还是每个浏览器都会给出不同的结果。
使用 Microsoft Edge 和 IE10 可以完美对齐。 它不能使用 Chrome、Mozilla 和 Opera 完全对齐。
代码是
<!DOCTYPE html>
<html>
<head></head>
<body style="font-size:18pt"><br><br>
<span> text number one
<table style="margin:0; padding:0; border:0; border-spacing:0; vertical-align:text-bottom; display:inline-table">
<tr>
<td style="padding:0">
text number two
</td>
</tr>
</table>
</span>
</body>
</html>
【问题讨论】：
-
这似乎不是表格数据，所以你不应该首先使用表格。 “我需要这样才能让我的程序使用我稍后会添加的函数” – 如果你还没有编写这些函数，那么你应该能够使用 HTML一开始在语义上更有意义的结构。它可能会自动解决您的对齐问题。 （如果您确实有使用表格的真正正当理由，请更详细地描述您要实现的目标。）
-
根据我对 CSS 的了解，文本应该对齐......问题是......浏览器是否没有显示它应该显示的内容......就像我说的一些浏览器会对齐它，而其他一些浏览器会对齐它不会...如果我的代码有问题，您如何使这些文本在所有浏览器中对齐...是的，我需要它作为表格。函数已经写好了，但它是一个非常大的程序，而且这些函数无论如何都不是我的问题的重点。
-
可能是由于应用于表格元素的默认边距/填充。使用浏览器的开发工具进行调查。
-
我会删除 span 标签。它强制标签之间的所有对象水平（同一行）对齐。看起来你应该建立一个完整的表。他们对细节很挑剔，但会给你你想要的。现在我看到 1/2 的桌子，但不确定这是否可行。
-
为什么不把它做成一张完整的桌子。我看到 1/2 表，但不确定它如何与所有浏览器一起使用。 'span' 标签仅适用于内联元素。
标签： javascript html css vertical-alignment