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

1像素的问题，行高和位置计算出现1像素偏差
使用 vertical-align:baseline; 即可
https://jsfiddle.net/zwwill/1...
更多请看 http://www.zhangxinxu.com/wor...

Answer 2

input{vertical-align:bottom}

Answer 3

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

Answer 4

我喜欢这样写

000

000 <input type="text">34555

222

td{
line-height:40px;
}
input{
height:30px;
}

Answer 5

给css里面加 transform: translateY(-50%); 使元素垂直居中