Проблема с отображением: ячейка таблицы и выравнивание по вертикали: середина отображается неправильно

0

Это простая проблема, и я уверен, что я просто что-то пропускаю, но если вы заметите, в 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;
}

Спасибо заранее за любые предложения.

Теги:
css-tables
vertical-alignment

2 ответа

0

думаю, я исправил его сам... lol мне нужно было добавить:

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

к css

0

Включить label { vertical-align: top; } label { vertical-align: top; }

См. Этот jsFiddle.

  • 0
    к сожалению, это не решает проблему, см. выше, что я хотел, чтобы метка была выровнена по вертикали в центре или в середине. Примечание: пожалуйста, не используйте ярлыки, используя отступы и поля.
  • 0
    думаю, я исправил это сам ... lol мне нужно было добавить: form label,form input,form textarea { vertical-align:middle }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню