How to align text in the middle of a child row flexbox element. W

Question

I want to align my text in the example below to middle and center of my box. Tried to use align-content:center or justify-content:center but it just messes with the flex-basis. Just like in the first box of the image I attached.

What It Looks Like

Here is my html code

<div class="box">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
 </div>

and here's the CSS

.box {
  display: flex;
      height: 350px;
     justify-content: space-evenly ;
    
}
.box > div{
  flex-basis: 25%;
   background-color: rgba(255, 235, 205, 0.336);
  box-shadow: 2px 2px #eee0e0;
  font-size: 1.5em;
 }
.one{
  align-self: center;

  }

MaxiGui · Answer 1 · 2020-10-18T07:38:45.557

0

Set to all children : margin: auto; line-height:350px; It will set margin auto to all of them.

edited Oct 18 '20 at 07:38

answered Oct 18 '20 at 07:30

MaxiGui

6,190
4
16
33

score 0 · Accepted Answer · answered Oct 18 '20 at 07:30

0

text-align: center; will centralize your text horizontally. If you want to also centralize your text vertically, you should set its line-height to be equal to its parent, which is 350px.

.box {
  display: flex;
  height: 350px;
  justify-content: space-evenly ;
    
}
.box > div{
  flex-basis: 25%;
  background-color: rgba(255, 235, 205, 0.336);
  box-shadow: 2px 2px #eee0e0;
  font-size: 1.5em;
  text-align:center;    /*  new line  */
  line-height:350px;    /*  new line  */
 }

<div class="box">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
 </div>

answered Oct 18 '20 at 07:30

Omid.N

824
9
19

It's strange that the line-height is equal to the parent and the text remains in the box not outside it. I will have to look more into it. This clearly worked but now I need to know why. – Daisy Lily Oct 18 '20 at 07:38
@DaisyLily I agree with you that using line-height to do this otherwise you should wrap the text in `div`s in a paragraph and make those `div`s flexbox or set their padding to `auto`. That is actually how you should do it !! – Omid.N Oct 18 '20 at 07:48

score 0 · Answer 3 · answered Oct 18 '20 at 07:40

0

You try using align-items:center together with justify-content:center on all children divs and everything should work as intended.

.box div{
  display:flex;
  justify-content:center;
  align-items:center;
}

answered Oct 18 '20 at 07:40

nishkaush

1,512
1
13
20

How to align text in the middle of a child row flexbox element. W

3 Answers3