Задать вопрос
@sinevik
css

Свойства vertical-align?

<!DOCTYPE html>
<html>
<head>
  <title>Свойство vertical-align.</title>
<style>
    #container{
        width: 400px;
        height: 100px;
        border: 1px solid black;
        padding: 2px; /* Устанавливаем внутренний отступ */
        margin: 0 auto; /* Размещщаем блок по центру */
    }
    #container:before{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content: "";
        text-align: center;
    }
    p{
        line-height: 50px;
        font-size: 30px;
    }

    span{
        display: inline-block;
        vertical-align: bottom;
        font-size: 10px;
    }
</style>
</head>
<body>

<p>asdasdasdasdasdasdasd<span>Ressfsdfsdf</span>asdasdasd</p>

</body>
</html>


Подскажите почему строка span не опускается к нижней части строки . У которой высота строки 50px. Сморю ролик на ютубе там такая штука работает.
У меня получается вот так
IV3uUd0OQWaZyjGGYiMq5g.png
  • Вопрос задан
  • 212 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
Stimulate
@Stimulate
могу
https://jsfiddle.net/daft82m5/
Ответ написан
Комментировать
Комментировать
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
у < p > line-height убери
Ответ написан
3 комментария
3 комментария
rework
@rework
Помог ответ? В благодарность отметь его решением 
#container{
        width: 400px;
        height: 100px;
        border: 1px solid black;
        padding: 2px; /* Устанавливаем внутренний отступ */
        margin: 0 auto; /* Размещщаем блок по центру */
    }
    #container:before{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content: "";
        text-align: center;
    }
    p{
        font-size: 30px;
    }

    span{
        display: inline-block;
        vertical-align: bottom;
        font-size: 10px;
    }


https://jsfiddle.net/mc0p5uh7/
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Добработать/переработать сайт на Modx Evolution (II)
23 дек. 2024, в 14:06
1000 руб./за проект
Написать программный код для обучения модели, анализирующей данные
23 дек. 2024, в 13:55
13000 руб./за проект
Ещё заказы