table 没有垂直居中

Question

table中同时有文字和input时，文字就不居中了，有稍微的偏差，并且在不同浏览器中表现不一致（忽略我的错误单词。。。）。

可以看到000和000在chrome和ie中明显不在一条线上。

<table>

    <tr>

        <td>000</td>

        <td>000 <input type="text">34555</td>

    </tr>

</table>

input{hieght:30px}

Answer 1

给你分析下原因，因为td默认的vertical-align是'middle',里面的内容都会按其全部行的高度的一半和td的一半对齐。因为有个很高的input，左右两边的高度不一样，这样在内容被居中时，左边就相当于居中对齐，右边的文字是基线对齐。也就是说让右边的文字居中对齐就可以了。比如给右边文字外面加一层标签设置vertical-align:middle