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:center
y align-items:center
en 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:
<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: flex
en 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>