垂直对齐

问题描述：

我想对齐表单控件的表列，如这样jsbin例如：垂直对齐

http://jsbin.com/umeyud/6

我只在乎IE8 +，最近Firefox和最近Chrome（对不起Safari & Opera！）

虽然我可以变得非常接近，但我希望我可以在左边的“标签”上很好地与所有其他控件上显示的所有文本的第一行对齐。

额外的好处是让复选框垂直居中到文本的第一行中间。

答

在这里，你去。请享用！

我需要为4PX IE &歌剧，6像素为其他

<!DOCTYPE html> 
<html> 
<!-- 
    Created using jsbin.com 
    Source can be edited via http://jsbin.com/umeyud/6/edit 
--> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style id="jsbin-css"> 
div 
{ 
    display: inline-block; 
} 

body,td,input,select,textarea 
{ 
    font: 14pt Arial 
} 

.multi td 
{ 
    white-space: nowrap; 
} 

.q, .vAlign 
{ 
    padding-top: 0px; 
    vertical-align: top; 
    padding-top: 4px; 
} 

table 
{ 
display: inline-table; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr> 
     <td class="q"><div>Label</div></td> 
     <td class="a text" style='vertical-align: top'><input type="text" value="Hello, World!"/></td> 
     <td class="a text" style='vertical-align: top'><textarea>Hello, World!</textarea></td> 

     <td class="a yesno vAlign" style='vertical-align: top'><div><input type="checkbox"/>&nbsp;</div></td> 
     <td class="a single" style='vertical-align: top'><select><option>Option 1</option></select</td> 
     <td class="a multi vAlign" style='vertical-align: top'> 
     <input type='checkbox'/>Option 1<br> 
     <input type='checkbox'/>Option 2<br> 
     <input type='checkbox'/>Option 3 
     </td> 
     <td class="a picture"><img src="#" width=160 height=120></td> 
    </tr> 
    </table> 
    </body> 
</html>

抱歉，但是这并没有真正达到我一直在寻找 - 无需手动调整浏览器特定的偏移将不会为工作我的用例。 – Richard

相关推荐