Enter在这里

问题描述 投票:0回答:2
try:

td, input { vertical-align: middle; }
如果这不起作用,您将需要发布更多代码才能获得一个好的答案。
    

html css
2个回答
0
投票
无论我同意@willoller的观点,如果在社区其他建议不适合您的情况下,您需要发布相关的代码,以帮助我们为您找到答案。

假设没有使用其他CSS,则默认情况下应垂直对齐中间。 ...您的问题可能与文本和输入不一样的线高度有关。
td{
  line-height:40px;
  height:40px;
}

到目前为止,请感谢所有人的帮助。线高和高度添加纠正了这两个文本的垂直对准,但也显着增加了行间间距。如果我将保证金,填充和边界设置为0,这不会改善。我无法将高度降低到小于40px,或者对准会再次失败。

0
投票
有一个演示页面

<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>Table test</title> <style type="text/css"> .s0 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } .s1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: middle; line-height: 40px; height: 40px; } .s2 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: middle; line-height: 40px; height: 40px; padding: 0; margin: 0; border-width: 0; } </style> </head> <body> <pre> font-family: Arial, Helvetica, sans-serif; font-size: 13px;</pre> Col1 captions have different vertical alignment to Col2 but inter-row spacing is good. <table> <tr> <td class="s0">Col1</td> <td class="s0">Col2<input type="text"></td> </tr> <tr> <td class="s0">Col1</td> <td class="s0">Col2<input type="checkbox" checked><input type="text" value="ABC"></td> </tr> <tr> <td class="s0">Col1</td> <td class="s0">Col2<input type="text"></td> </tr> </table> <pre> font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: middle; line-height: 40px; height: 40px; </pre> The two column captions are now at the same height but the inter-row spacing has increased <table> <tr> <td class="s1">Col1</td> <td class="s1">Col2<input type="text"></td> </tr> <tr> <td class="s1">Col1</td> <td class="s1">Col2<input type="checkbox" checked><input type="text" value="ABC"></td> </tr> <tr> <td class="s1">Col1</td> <td class="s1">Col2<input type="text"></td> </tr> </table> <pre> font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: middle; line-height: 40px; height: 40px; padding: 0; margin: 0; border-width: 0; </pre> Padding, margins and border reduced to 0 but still greater inter-row spacing <table> <tr> <td class="s2">Col1</td> <td class="s2">Col2<input type="text"></td> </tr> <tr> <td class="s2">Col1</td> <td class="s2">Col2<input type="checkbox" checked><input type="text" value="ABC"></td> </tr> <tr> <td class="s2">Col1</td> <td class="s2">Col2<input type="text"></td> </tr> </table> </body> </html>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.