How can i center the content in a flex-item?

Question

i am trying like crazy but i cannot get the text inside this table (i built with flex) to be centered. All the content should be vertically centered. Any ideas how i can achieve this? Any kind of help is really appreciated. I tried now for several hours.

Thanks a lot!

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;
}

.wrapper>div {
  height: 250px;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}

.ct-content-3 {
  flex: 1 20%;
  background: lime;
}

<div class="wrapper">
  <div class="ct-title">Title
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="ct-content-1">6</div>
  <div class="ct-content-2">8</div>
  <div class="ct-content-3">12</div>
</div>

.wrapper>div { display: flex; align-items: center; } – VXp May 08 '18 at 07:46 — VXp, May 08 '18 at 07:46

score 0 · Answer 1 · answered May 08 '18 at 07:47

Try this. you need to apply flex on the child also.

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;
}

.wrapper>div {
  height: 250px;
      display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}

.ct-content-3 {
  flex: 1 20%;
  background: lime;
}

<div class="wrapper">
  <div class="ct-title">Title
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="ct-content-1">6</div>
  <div class="ct-content-2">8</div>
  <div class="ct-content-3">12</div>
</div>

score 0 · Answer 2 · answered May 08 '18 at 07:50

Please try below code

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;

}

.wrapper>div {
  height: 250px;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
   display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
    display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.ct-content-3 {
  flex: 1 20%;
    align-items: center;
   display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

<div class="wrapper">
  <div class="ct-title">Title
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="ct-content-1">6</div>
  <div class="ct-content-2">8</div>
  <div class="ct-content-3">12</div>
</div>

How can i center the content in a flex-item?

2 Answers2