Próbuję wyśrodkować kolumny w rzędzie, ale nie są one wyśrodkowane. Próbowałem już wielokrotnie zmienić kod, ale nie mogę znaleźć błędu. Próbowałem już justify-content:center i align-items:center w klasach „services” i „section-3”, ale to nie działa. Nie mogę też wyśrodkować tekstu „Co robię”, który jest częścią górnego wiersza.

Jak to wygląda teraz:

enter image description here

          <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;
}
0
Joana Oliveira 2 kwiecień 2020, 18:47

3 odpowiedzi

Najlepsza odpowiedź

Nigdzie nie widzę reguły display: flex. Zacznij od tego, a następnie usuń szerokości kolumn, ponieważ są one sprzeczne z celem układu elastycznego.

.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>
0
isherwood 2 kwiecień 2020, 15:56

W usługach wierszowych {display: flex; justify-content (wypróbuj także elementy): center;}

Trudno powiedzieć, gdzie wszystko idzie, ale spróbuj.

1
gospecomid12 2 kwiecień 2020, 15:56

Zarówno align-items:center, jak i justify-items:center działają w siatce CSS. Twój problem jest prawdopodobnie związany z innym CSS wpływającym na wysokość / szerokość siatki lub umieszczenie samej reguły stylu 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>
0
symlink 2 kwiecień 2020, 16:05