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

左对齐但居中

2 个答案: