Question

我试图将列居中对齐，但它们不会居中。我已经尝试过多次更改代码，但是似乎找不到错误。已经尝试在“服务”和“第3节”类中使用justify-content:center和align-items:center，但是它不起作用。我也无法居中显示第一行中“我做什么”文本。

现在的样子：

          <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>
            <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>
        </div>

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 0 100px;
}
.section-3 {
  background-color: hsla(7, 56%, 85%, 0.746);
  height: 500px;
  width: 100%;
  align-items: center;
}
.what-i-do {
  font-family: "Lato", sans-serif;
  color: white;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
  transform: rotate(90deg);
  padding: 100px 0px 200px 0px;
  font-size: 18px;
  font-weight: 700;

}

.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;
}

.first-column {
  width: 250px;
}

.second-column {
  width: 250px;
}

.third-column {
  width: 250px;
}

.services-text {
  font-family: "Lato", sans-serif;
  text-align: justify;
  line-height: 1.8;
  letter-spacing: 0em;
  font-size: 16px;
  font-weight: 300;
}

Answer 1

在行服务{display：flex;证明内容（也尝试项目）：居中；}

很难说出一切，但是尝试一下。

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>

如何居中放置行内的flexbox项目？

3 个答案: