Question

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

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;
}

提前感谢任何建议。

Answer 1

加入label { vertical-align: top; }

请参阅this jsFiddle。

Answer 2

猜我自己修好了...大声笑我需要补充一下：

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

到css

显示问题：table-cell＆amp;垂直对齐：中间无法正确显示

2 个答案: