Вертикальное выравнивание CSS: text-top; не работает для элементов span в моем теге <p>?
Я хочу, чтобы верхняя часть любого нижнего тега span была прикреплена к основанию (нижней части) верхнего тега span, как на изображении.
Я хотел выровнять элементы span, чтобы верх каждого тега span находился в основании верхнего тега span. Я пробовал использовать vertical-align: text-top;, но не увидел никаких изменений.
p#highlighter {
border: 5px solid black;
color: black;
font-family: tusker-grotesk;
text-align: left;
vertical-align: text-top;
width: 50%;
position: absolute;
top: 6%;
left: 2%;
}
p#highlighter span#pos {
color: #DE000D;
font-size: 50px;
}<p id = "highlighter">
<span id = "pos">POS</span> <br />
<span id = "smaller">IS AVAILABLE</span> <br />
<span id = "here">HERE</span>
</p>Я тоже пробовал vertical-align: top; но так и не увидел изменений.
Моя цель состоит в том, чтобы теги span были вертикально сгруппированы (прикреплены) друг к другу в контейнере p.
Я имел в виду верхний тег <span>. Для кластеризации я имею в виду прикрепленные друг к другу по вертикали.
Можете нарисовать и выложить то, что хотите нарисовать в пейнте, ничего не понятно из того, что вы говорите
Они уже как бы прикреплены друг к другу вертикально, нет?
Хорошо. Добавлю рисунок.
Я отредактировал вопрос, а также добавил изображение. Пожалуйста, проверьте, поняли ли вы вопрос.
ваш вариант использования требует, чтобы элементы были встроенными, а не блочными? потому что такого рода точное выравнивание текста затруднено со встроенными элементами — весь их смысл в том, что они должны плавно перемещаться и подстраиваться под доступное пространство. Для чего-то вроде вашей картинки текст SVG, вероятно, будет лучшим вариантом.
Да, они должны быть встроенными. И я ничего не знаю о текстах SVG.
Ответы 1
Я не уверен, что правильно вас понял, но если вам просто нужно что-то, как на картинке, мой фрагмент может помочь. Это в основном основано на вашем.
#highlighter {
position: absolute;
padding: 10px;
border: 5px solid black;
line-height: 1;
text-align: left;
font-family: sans-serif;
font-weight: 900;
color: black;
}
#highlighter span {
font-size: 4em;
line-height: 0.7;
}
#highlighter #pos {
color: red;
}
#highlighter #smaller {
font-size: 1.5em;
padding-left: 0.15em;
letter-spacing: 0.015em;
}<p id = "highlighter">
<span id = "pos">POS</span> <br />
<span id = "smaller">IS AVAILABLE</span><br />
<span id = "here">HERE</span>
</p>Ага! Они привязаны к тому, как я этого хотел. Но так как я не получил быстрого ответа, я использовал позиционирование CSS, чтобы выровнять их таким образом.
Не могли бы вы уточнить, что вы подразумеваете под «верхним тегом», в основе которого вы хотите, чтобы каждый тег span был? Не могли бы вы также уточнить, что вы имеете в виду, когда говорите, что хотите, чтобы «теги
spanбыли вертикально сгруппированы друг с другом»?