垂直對齊

我想對齊表單控件的表列，如這樣jsbin例如：垂直對齊

http://jsbin.com/umeyud/6

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

雖然我可以變得非常接近，但我希望我可以在左邊的「標籤」上很好地與所有其他控件上顯示的所有文本的第一行對齊。

額外的好處是讓複選框垂直居中到文本的第一行中間。

來源

2012-09-29 Richard

在這裏，你去。請享用！

我需要爲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>

來源

2012-09-29 14:36:42 enhzflep

抱歉，但是這並沒有真正達到我一直在尋找 - 無需手動調整瀏覽器特定的偏移將不會爲工作我的用例。 – Richard

回答

相關問題