鍍金池/ 問(wèn)答/HTML/ table 沒(méi)有垂直居中

table 沒(méi)有垂直居中

table中同時(shí)有文字和input時(shí)，文字就不居中了，有稍微的偏差，并且在不同瀏覽器中表現(xiàn)不一致（忽略我的錯(cuò)誤單詞。。。）。

clipboard.png
可以看到000和000在chrome和ie中明顯不在一條線上。

<table>
    <tr>
        <td>000</td>
        <td>000 <input type="text">34555</td>
    </tr>
</table>
input{hieght:30px}
回答
編輯回答
亮瞎她

1像素的問(wèn)題，行高和位置計(jì)算出現(xiàn)1像素偏差
使用 vertical-align:baseline; 即可
https://jsfiddle.net/zwwill/1...
更多請(qǐng)看 http://www.zhangxinxu.com/wor...

2017年8月10日 21:44
編輯回答
怣痛

我喜歡這樣寫(xiě)

000 000 <input type="text">34555 222

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

2017年1月6日 11:16
編輯回答
故林

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

2018年8月17日 15:37
編輯回答
久不遇

給你分析下原因，因?yàn)閠d默認(rèn)的vertical-align是'middle',里面的內(nèi)容都會(huì)按其全部行的高度的一半和td的一半對(duì)齊。
因?yàn)橛袀€(gè)很高的input，左右兩邊的高度不一樣，這樣在內(nèi)容被居中時(shí)，左邊就相當(dāng)于居中對(duì)齊，右邊的文字是基線對(duì)齊。也就是說(shuō)讓右邊的文字居中對(duì)齊就可以了。比如給右邊文字外面加一層標(biāo)簽設(shè)置vertical-align:middle

2017年4月6日 09:16
編輯回答
無(wú)標(biāo)題
input{vertical-align:bottom}
2017年11月23日 19:33