左对齐但居中内容

Question

我正在尝试将文本向左对齐，但也将内容居中。它不工作。

像这样：image of the design I wish to accompolish。

这是我的 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. 

我正在使用 flexbox 框架，所以复制的内容太多了 并粘贴到这里。

这是我在 codepen.io 上的完整代码，此链接将提供所有 scss 标记： https://codepen.io/harp30/pen/GGbKdp?editors=1100

Answer 1

这是因为您的 .section 具有 padding: 10rem 0 0 0; 规则，这意味着您只有顶部的填充，而不是底部的填充。要使内容居中，您可以从底部添加相同的填充：

.section {
    padding: 10rem 0;
}

这个想法是从顶部和底部具有相同的填充/边距。要使<h1> 中的文本居中，您只需使用text-align: center 规则即可。

这是更新后的DEMO。

Answer 2

如果没有在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 中左对齐文本。您还需要重新对齐段落中的文本。