DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?

Как сверстать такой элемент?

3B9wz9g.png
  • Вопрос задан
  • 284 просмотра
Решения вопроса 4
nazarpc
@nazarpc
Open Source enthusiast
Flex контейнер, а в нём по краям узкие растягивающиеся блоки с красным фоном, а по средине текст. Этот вариант мне больше нравится.
Так же можно элемент с красным фоном и широкой белой рамкой, а внутри центрированный текст с отрицительными отступами.
Ответ написан
serjikz
@serjikz
web-developer
h2 (или любого другого тега) с центрированием, внутри span у которого inline-block, а также у него же before и after с такими же inline-block но размерами (ширина и высота) ну и конечно у span и у before и after vertical-align:middle; всё.
Ответ написан
Сделай так!
<div class="strike">
    <span>Hello World</span>
</div>

.strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
    }
  
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: red;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }


пример: https://jsfiddle.net/miha8722/n3hmk70x/
Ответ написан
trushka
@trushka
text-align: center и псевдоэлементы inline-block с отрицательными отступами
https://jsfiddle.net/trushka/24nwxndo/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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