显示问题：表格单元和垂直对齐：中间无法正确显示答案

【问题标题】：Issue with Display:table-cell & Vertical-align:middle not displaying correctly显示问题：表格单元和垂直对齐：中间无法正确显示
【发布时间】：2013-10-11 22:39:03
【问题描述】：

这是一个简单的问题，我确定我只是忽略了一些东西，但如果您注意到，在 第 4 行，标签不是垂直对齐。在 JSFiddle 上查看它：

http://jsfiddle.net/uidezigns/HJEca/

HTML

<form class="lable_left">
   <p>
      <label for="fn">First name:</label>
      <input type="text" name="fn">
   </p>
   <p>
      <label for="ln">Last name:</label>
      <input type="text" name="ln">
   </p>
   <p>
      <label for="ph">Phone Number:</label>
      <input type="tel" name="ph">
   </p>
   <p>
      <label for="ad">Street Address:</label>
      <textarea name="ad"></textarea>
   </p>
   <p>
      <label for="ct">City:</label>
      <input type="text" name="ct">
   </p>
   <p>
      <label for="st">State:</label>
      <input type="text" name="st">
   </p>
   <p>
      <label for="zc">Postal:</label>
      <input type="text" name="zc">
   </p>
   <input type="submit" value="Submit">
</form>

CSS

/* --- skins for visibility - Remove for implementation --- */

form {
    margin: 40px;
    padding: 20px;
    background-color: #FAE2BF;
}

form p {
    background-color: #F7CBC7;
}

form label {
    background-color: #E5E2DB;
}

        /*----------------------------------------------------------*/

form {
    font: normal 12px Arial;
    display: block;
}

form p {
    padding: 0;
    margin: 2px 0;
    float: left;
    width: 100%;
}

form.two_row p {
    width: 50%;
}

form.three_row p {
    width: 33%;
}

form label,form input,form textarea {
    display: block;
}

label {
    margin: 10px 0 0;
}

input {
}

textarea {
    width: 100px height:100px;
    margin: 0;
}

form.lable_left p {
    display: table-cell;
    vertical-align: middle;
}

form.lable_left label,form.lable_left input,form.lable_left textarea {
    display: inline-block;
    margin: 0;
}

form.lable_left label {
    width: 120px;
}

form.lable_left input {
}

input[type="submit"] {
    clear: both;
    float: none;
}

提前感谢您的任何建议。

【问题讨论】：

标签： html css vertical-alignment css-tables

【解决方案1】：

包括label { vertical-align: top; }

见this jsFiddle。

【讨论】：

不幸的是，这并不能解决问题，请参见上文，我希望标签在中心或中间垂直对齐。注意：请不要使用填充和边距的快捷方式。
猜我自己修好了...哈哈，我需要补充：form label,form input,form textarea { vertical-align:middle }

【解决方案2】：

我猜我自己修好了……哈哈，我需要补充一下：

form label,form input,form textarea { vertical-align:middle }

到css

【讨论】：