¿Cómo puedo artículos centro FlexBox que se encuentran dentro de una fila?

Joana Oliveira:

Estoy intentando centrar las columnas dentro de una fila pero no van a centro. Ya he intentado cambiar el código varias veces, pero me parece que no puede encontrar el error. Ya intentó justify-content:centery align-items:centeren ambos "servicios" y "clases sección-3" y no funciona. También estoy no es capaz de centrar el texto "Lo que hago", que es parte de la fila superior.

Como se ve ahora:

introducir descripción de la imagen aquí

          <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;
}
Isherwood:

No veo una display: flexen cualquier lugar regla. Empezar con eso, a continuación, quitar el ancho de columna tal y como frustrar el propósito de un diseño flexible.

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

Supongo que te gusta

Origin http://10.200.1.11:23101/article/api/json?id=391617&siteId=1
Recomendado
Clasificación