Почему vertical-align: text-top; не работает в CSS

Я хочу выровнять некоторый текст в верхней части div. Кажется, что vertical-align: text-top; должен делать трюк, но он не работает. Другие вещи, которые я сделал, например, поместить divs в столбцы и отобразить пунктирную границу (чтобы я мог видеть, где находится верхняя часть div), все работает нормально.

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}

Ответы

Ответ 1

Атрибут vertical-align предназначен только для встроенных элементов. Он не будет влиять на элементы уровня блока, такие как div. Кроме того, текст-текст перемещает текст только до верхней части текущего размера шрифта. Если вы хотите вертикально выровнять встроенный элемент в начало, просто используйте это.

vertical-align: top;

Тег абзаца не устарел. Кроме того, атрибут вертикального выравнивания, применяемый к элементу span, может отображаться не так, как предполагалось, в некоторых браузерах mozilla.

Ответ 2

vertical-align должен работать только над элементами, которые отображаются как inline.  отображается как встроенный по умолчанию, но не все элементы. Элемент блока абзаца  представляется по умолчанию как блок. Типы рендеринга таблицы (например, table-cell) позволят вам использовать выравнивание по вертикали.

Некоторые браузеры могут позволить вам использовать свойство CSS vertical-align для таких элементов, как блок абзаца, но они не должны. Текст, обозначаемый как абзац, должен быть заполнен содержимым на письменном языке, или разметка неверна, и вместо этого следует использовать один из нескольких других параметров.

Надеюсь, это поможет!

Ответ 3

что-то вроде

  position:relative;
  top:-5px;

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

Ответ 4

Вы можете применить position: relative; к div, а затем position: absolute; top: 0; к абзацу или диапазону внутри него, содержащему текст.

Ответ 5

Вы можете использовать контекстные селектора и перемещать по вертикали. Тогда это будет работать с тэгом p. Ниже приведен пример ниже. Любые p-метки в вашем классе будут уважать элемент управления по вертикали:

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

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

Ответ 6

Все выше сказанное не работает для меня, я только что проверил это и его работу:

vertical-align: super;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

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

Ответ 7

position:absolute;
top:0px; 
margin:5px;

Решила мою проблему.

Ответ 8

Вы можете использовать margin-top: -50%, чтобы полностью переместить текст в верхнюю часть div.

margin-top: -50%;

Ответ 9

Проблема, которую я не могу сделать, из информации, которую я предоставил:

У меня был текст, заключенный в теги старой школы .

Я изменил  на , и он отлично работает.