Выравнивание текста по вертикали внутри метки

Question

Пример проблемы http://img638.imageshack.us/img638/3733/97914817.jpg

Я пытаюсь перекодировать одну из моих старых форм.Он был заполнен таблицами, которые я хочу заменить на CSS.Однако у меня возникают проблемы с выравниванием текста и элемента формы по вертикали.Как показано на рисунке, текст по умолчанию начинается сверху, а не с середины.Синие блики вокруг строки означают интерпретацию и выбор происходящего сновидениями.

У меня есть метка и входные элементы div, оба плавающие влево, внутри элемента с именем #light, который находится внутри общего контейнера.Вот как выглядит мой CSS-код:

#contentBox{
 width: 600px;
 float: left;
 background-color: #e2e2e2;
 overflow: auto;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 font-size: 12px;
}
#light {
 float: left;
 width: 500px;
 padding: 15px;
 background-color: #e2e2e2;
 margin: 7px;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 vertical-align: middle;
}
input {
 float: right;
 width: 20em;

}
label {
 float: left;
 text-align: right;
 vertical-align: baseline;
}

Есть идеи, в чем проблема?Я пытался поменять местами вертикальное выравнивание в разных элементах, плавать в разных направлениях, избавиться от метки, но у меня просто больше проблем, чем меньше.

Answer 1

Вы не можете использовать vertical-align на элементах, если они не являются ячейками таблицы (или отображаются как таковые), как объясняет в этой статье .Установите line-height на высоту элемента, если у вас есть только одна строка текста.

Answer 2

Обычно для решения этой проблемы я использую свойство line-height:

Ex:

div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}

Это установит шрифт на 12 пикселей, а высоту строки на 30 пикселей, сохраняя шрифт вертикально выровненным в пределах 30 пикселей от его линии.

Answer 3

Вы можете выбрать «дешевое» решение и применить padding-top к меткам divs.

Answer 4

Вертикальное выравнивание может применяться только к встроенным элементам.Лучшее решение - изменить ваш HTML и сделать его таким, как в в этих примерах

Answer 5

Не уверен, но ваш входной тег установлен на «float: right», поэтому его высота не будет учтена родителем. Следовательно, высота родительского элемента - это, вероятно, высота метки (я подозреваю, что dreamweaver неправильно интерпретирует действия браузеров.) Попробуйте удалить с плавающей точкой тег ввода и посмотрите, имеет ли это значение.

Answer 6

Вертикальное выравнивание текста может быть невероятно раздражающим или невероятно легким.

Если размер всех задействованных элементов известен, лучше всего установить вручную отступы / поля для самого текста, чтобы убедиться, что он выровнен.

Если контент, который вы хотите центрировать вертикально, является динамическим, это ваша лучшая ставка .