Html 表格行中窗体控件的垂直对齐_Html_Css

Html 表格行中窗体控件的垂直对齐

html css

Html 表格行中窗体控件的垂直对齐,html,css,Html,Css,我正在尝试对齐表单控件的表行，如本jsbin示例所示：我只关心IE8+、最近的Firefox和最近的Chrome（对不起，Safari和Opera！）虽然我可以非常接近，但我希望左侧的“标签”能够与所有其他控件上显示的所有文本的第一行对齐额外的好处是使复选框垂直居中于第一行文本的中间。给你。享受吧 IE&Opera需要4px，其他需要6px <!DOCTYPE html> <html> <!-- Created using jsbin.com Sou

我正在尝试对齐表单控件的表行，如本jsbin示例所示：

我只关心IE8+、最近的Firefox和最近的Chrome（对不起，Safari和Opera！）

虽然我可以非常接近，但我希望左侧的“标签”能够与所有其他控件上显示的所有文本的第一行对齐

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

给你。享受吧

IE&Opera需要4px，其他需要6px

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


JS-Bin
div
{
显示：内联块；
}
正文，td，输入，选择，文本区域
{ 
字体：14pt Arial
}
.多td
{ 
空白：nowrap；
}
.q、.vAlign
{ 
填充顶部：0px；
垂直对齐：顶部；
垫面：4px；
}
桌子
{
显示：内联表；
}
标签
你好，世界！
选项1令人担忧，但这并不能真正实现我所期望的——必须手动调整特定于浏览器的偏移量对我的用例不起作用。