Выровнять по вертикали с базовой линией и текстовыми областями

Question

Я пытаюсь выровнять ярлык с базовой линией первой строки текста в текстовой области.

Наивная попытка:

<div style="vertical-align: baseline; display: inline-block">
   <label for="comments">Comments:</label>
</div>
<div style="vertical-align: baseline; display: inline-block">
   <textarea name="comments" id="comments"></textarea>
</div>

приводит к выравниванию метки по нижней части текстовой области. Я бы предпочел, чтобы он был выровнен по первой линии области.

Спасибо.

Answer 1

Проблема в том, что текстовая область рассматривается как блок, как изображение.При выравнивании по вертикали вместо текста используется граница для определения размещения.В приведенном ниже примере вы можете видеть, что метка и div расположены на основе текста внутри, где текстовая область ведет себя как изображение.

http://jsfiddle.net/kenearley/nGaQs/3/

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

Answer 2

Вам нужно поместить label div внутри того же div, что и текстовая область, а затем, если вы хотите, чтобы она была установлена ​​на вершине textarea, которую вы ищете vertical-align: top, а неbaseline.

Просмотреть и пример здесь:
http://jsfiddle.net/anhus/