Задать вопрос
@papabig

Как выровнять текст в ol?

Есть ли возможность выровнять текст в списке по макету?
Макет:
1f9acbf1d18040ea8255657379858c89.png
Как это выглядит на странице:
f5dd9fa70bd444cfb8eac5ede17e5122.png
HTML:
<div class="ol-text">
    <ol>
        



        <li>У нас самая большая дилерская сеть</li>
        <li>У нас гарантия 5 лет</li>
        <li>Ближайшие 50 лет мы будем на рынке</li>
        <li>В нашей компании работают европейские специалисты</li>
    </ol>
</div>


CSS:
.ol-text ol {
counter-reset: myCounter;
}

.ol-text li{
list-style: none;
color: #000;
}

.ol-text li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #c32328;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
}


Либо нужно использовать какой-то другой вариант?
  • Вопрос задан
  • 892 просмотра
Подписаться 1 Оценить Комментировать
Решение пользователя AlexKeller К ответам на вопрос (2)
AlexKeller
@AlexKeller
https://jsfiddle.net/ekffrwtb/
Flex для LI, плюс поиграться с выравниванием по вертикали
Ответ написан
Комментировать