Почему выравнивание по вертикали: text-top; не работает в CSS

Question

Я хочу выровнять некоторый текст к вершине div. Кажется, что vertical-align: text-top; должен добиться цели, но это не работает. Другие вещи, которые я сделал, например, поместили div в столбцы и отобразили пунктирную границу (чтобы я мог видеть, где находится верхняя часть 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;
}

Answer 1

Атрибут вертикального выравнивания предназначен только для встроенных элементов. Это не повлияет на элементы уровня блока, такие как div. Также text-top только перемещает текст в верхнюю часть текущего размера шрифта. Если вы хотите выровнять встроенный элемент по вертикали, просто используйте это.

vertical-align: top;

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

Answer 2

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

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

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

Answer 3

что-то вроде

  position:relative;
  top:-5px;

просто у меня работает сам элемент inline. Нужно играть с верхом, чтобы он был отцентрирован вертикально ...

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

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

по вертикали: супер;

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

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

Answer 8

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

margin-top: -50%;

Answer 9

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

• У меня был текст в тегах старой школы <p>.

Я изменил <p> на <span>, и он отлично работает.