@sinevik

Свойства 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 просмотров
Пригласить эксперта
Ответы на вопрос 3
Stimulate
@Stimulate
могу
Ответ написан
Комментировать
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
у < p > line-height убери
Ответ написан
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/
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы