Выровнять по левому краю, но по центру

Question

Я пытаюсь выровнять текст по левому краю, но также центрирую содержимое. Это не работает.

Вот так: изображение дизайна, который я хочу выполнить .

Вот моя разметка PUG, и я разместил остальную информацию на codepen.io:

.

section.team-section.section
    .container  
        .row.center-it
            .center-it.col-xs-12.col-sm-12.col-md-8.col-lg-8.u-align--center
                h1.section__title.section__title--block
                    | <span class="u-display-block type---color-light-grey">Experienced.<br></span><span class="type--color-green u-display-block">Reliable.<br></span>
                    <span class="u-display-block type---color-light-grey">Commited.</span>
                p.section__description
                   | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 

Я использую флексбокс, так что это было бы слишком много для копирования и вставьте сюда.

вот мой полный код на codepen.io, эта ссылка предоставит все пометки scss: https://codepen.io/harp30/pen/GGbKdp?editors=1100

Answer 1

Не устанавливая явную ширину на h1, я не уверен, что вы можете сделать это со свойствами flex. Самый простой способ сделать это - добавить следующее:

.center-it {
    text-align: center;
}

.section{
    padding: 10rem 0 0 0;

    &__title{
        display: inline-block;
        text-align: left;
    }
}

p {
    text-align: left;
}

Это позволит ширине h1 соответствовать содержимому, центрируя его внутри родительского элемента, а затем выравнивая по левому краю текст внутри h1. Вам также нужно будет заново выровнять текст в абзаце.

Answer 2

Это потому, что ваше .section имеет правило padding: 10rem 0 0 0;, что означает, что у вас есть только отступы сверху, а не снизу. Чтобы центрировать содержимое, вы можете добавить тот же отступ снизу:

.section {
    padding: 10rem 0;
}

Идея состоит в том, чтобы иметь одинаковые отступы / поля как сверху, так и снизу. А для центрирования текста в <h1> вы можете просто использовать правило text-align: center.

Вот обновленный DEMO .