Почему 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;
}
9 63
css vertical-alignment

9 ответов:

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

vertical-align: top;

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

99

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

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

Я надеюсь, что это помогает!

18

что-то вроде

  position:relative;
  top:-5px;

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

10

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

3

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

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

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

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

1

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

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

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

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

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

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

0

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

margin-top: -50%;
-1

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

  • у меня был текст, вложенный в старой школе <p> теги.

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

-3