Чому вертикальне вирівнювання: text-top; не працює в CSS

Я хочу вирівняти текст до верху 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;
}

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

vertical-align: top;

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

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

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

Сподіваюся, це допоможе!

щось на зразок

  position:relative;
  top:-5px;

просто на вбудованому елементі сам працює для мене. Доведеться грати з верхом, щоб отримати його по центру вертикально ...

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

Ви можете використовувати контекстні селектори та перемістити там вертикальне вирівнювання. Тоді це буде працювати з тегом p. Візьмемо цей фрагмент нижче як приклад. Будь-які теги p у вашому класі поважатимуть елемент вертикального вирівнювання:

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

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

Ви також можете зберегти вертикальне вирівнювання в обох розділах, щоб інші вбудовані елементи використовували це.

Все вищезазначене для мене не працює, я щойно перевірив це та його роботу:

вертикальне вирівнювання: супер;

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

Я знаю, що доповнення або запас будуть працювати, але це останній вибір, який я віддаю перевагу.

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

Вирішив мою проблему.

Ви можете використовувати margin-top: -50%, щоб перемістити текст до самого верху div.

margin-top: -50%;

Проблему, яку я мав, неможливо зрозуміти з наведеної інформації:

• У мене був текст, укладений у <p>теги старої школи .

Я змінив <p>на, <span>і це чудово працює.