Как выровнять текст блока по центру?

Question

[Kirill0673]

Приветствую гуру верстки))

В блоке main__title заголовок никак не хочет выравниваться по центру.
Я задавал ему и родителю такие свойства, как text-align: center, justify-content: center; однако это не даёт никакого эффекта, и текст по-прежнему прижат к левому краю блока. В чём дело?

Вот пример:



C первого взгляда кажется что текст находится по центру, однако если присмотреться, то видно что отступ слева меньше чем справа.

Comments

[Antonio Solo]

flex не подойдет ?

[Kirill0673]

Antonio Solo, что именно ? j

[Kirill0673]

Вот хорошее объяснение происходящего от Pavel Pavel (Странно почему не отобразилось в комментах)
"Так происходит из-за letter-spacing. Он работает для каждой буквы словно margin-right. Т.е. он задает отступ даже для последней буквы, который учитывая при выравнивании. Не знаю как это решить более правильно, но самый очевидный и рабочий способ это обернуть последнюю букву в span и задать ему letter-spacing: 0."

Answer 1

[Андрей]

Решение в этом случае:

spoiler

<h1 class="main__title">
   <span>Фрукты</span>
   <span>Овощи</span>
   <span>Соки</span>
</h1>

.main__title span { display: block; }
.main__title span::first-letter { padding-left: 0.3em; }