如何将行内的 Flexbox 项目居中？

Question

我试图将行内的列居中，但它们不会居中。我已经尝试多次更改代码，但似乎找不到错误。已经在“服务”和“第 3 节”课程中尝试过justify-content:center，align-items:center但没有成功。我也无法将顶行的“我做什么”文本居中。现在的样子：https://i.stack.imgur.com/WGplQ.png          <div class="what-i-do">            <h3>WHAT I DO</h3>          </div>          <div class="row services">            <div class="column">              <div class="first-column">                <h3 class="services-title">                  Content <br />                  Creation                </h3>                <div class="services-text">                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis                  natoque penatibus et magnis dis parturient montes, nascetur                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque                  eu.                </div>              </div>            </div>            <div class="column">              <div class="second-column">                <h3 class="services-title">                  Strategy <br />                  Session                </h3>                <div class="services-text">                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis                  natoque penatibus et magnis dis parturient montes, nascetur                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque                  eu.                </div>              </div>            </div>

Answer 1

在行服务{显示：flex; justify-content（也尝试项目）：center;}

很难说一切都去哪里了，但尝试一下。

Answer 2

我在任何地方都没有看到display: flex规则。从这里开始，然后删除列宽，因为它们违背了弹性布局的目的。

.row {

    display: flex;

}

.column {

    padding: 0 20px;

}

.services {

    align-items: center;

    justify-content: center;

}

.services-title {

    font-family: "Ibarra Real Nova", serif;

    align-items: center;

    color: rgba(40, 44, 48, 1);

    font-weight: bold;

    text-align: center;

    font-size: 45px;

}

.services-text {

    font-family: "Lato", sans-serif;

    text-align: justify;

    line-height: 1.8;

    letter-spacing: 0em;

    font-size: 16px;

    font-weight: 300;

}

<div class="row services">

    <div class="column">

        <div class="first-column">

            <h3 class="services-title">

                Content <br />

                Creation

            </h3>

            

            <div class="services-text">

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis

                natoque penatibus et magnis dis parturient montes, nascetur

                ridiculus mus. Donec quam felis, ultricies nec, pellentesque

                eu.

            </div>

        </div>

    </div>

    

    <div class="column">

        <div class="second-column">

            <h3 class="services-title">

                Strategy <br />

                Session

            </h3>

            <div class="services-text">

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis

                natoque penatibus et magnis dis parturient montes, nascetur

                ridiculus mus. Donec quam felis, ultricies nec, pellentesque

                eu.

            </div>

        </div>

    </div>

    

    <div class="column">

        <div class="third-column">

            <h3 class="services-title">Branding</h3>

            <div class="services-text">

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis

                natoque penatibus et magnis dis parturient montes, nascetur

                ridiculus mus. Donec quam felis, ultricies nec, pellentesque

                eu.

            </div>

        </div>

    </div>

</div>

    

Answer 3

和align-items:center都justify-items:center在 CSS 网格中工作。您的问题可能与其他 CSS 影响网格的高度/宽度或样式规则display:grid本身的位置有关：

html, body{height: 100%}

.grid{

    height: 60%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background-color: salmon;

    align-items: center;

    justify-items: center;

}

<div class="grid">

    <div>Lorem ipsum</div>

    <div>Lorem ipsum lorem ipsum</div>

</div>