Question

我正在尝试在两个表列中垂直对齐文本，其中一个列还有一个文本输入控件。基本代码如：

<td>Caption</td><td>Enter here <input type="text"></td>

无论我如何将vertical-align应用于一列或两列，'Caption'与'Enter here'不在同一级别。大多数时候'标题'更高。解决方案是什么？

Answer 1

尝试：

td, input {
  vertical-align: middle;
}

如果这不起作用，您需要发布更多代码才能得到一个好的答案。

Answer 2

如果您的意思是此处的标题和输入未垂直对齐，尽管使用了建议的＆lt; vertical-align：middle;＆＃39;您可能需要考虑为列提供特定或最小宽度。我怀疑这些元素在“阅读”中可能并没有在视觉上彼此完美地定位。级别，由于列调整顶部/底部填充，以保持垂直对齐。因此严格限制列的宽度可能有所帮助。

但是我同意@willoller，如果除了社区其他人建议不能为您工作之外，那么您需要发布相关代码，以帮助我们找到适合您的答案。

Answer 3

默认情况下应该垂直对齐到中间，假设没有应用其他CSS。 ...你的问题可能与文字和输入不相同的行高有关.. ..：

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

Answer 4

感谢大家的帮助。线高和高度增加校正了两个文本的垂直对齐，但也显着增加了行间距。如果我将边距，填充和边框设置为0，则无法改善。我无法将高度降低到小于40px，或者对齐再次失败。

以下代码演示了这些问题。这是www.quinze.co.uk/test/test.html上的演示页面。

    <!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>

表列中的CSS垂直对齐

4 个答案: