CODEWITHSUNDEEP
htmlcssflexbox
Xeon
Xeon

Reputation: 395

Is there a way to vertically-center text in this Flexbox case without nesting flexboxes?

I'm playing around with flex-direction:column to understand this property better. Here's a Codepen of my code and a snippet below :

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  text-align:center;
  padding:30px 30px;
  width:20%;
  flex:1;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

Notice the text in the colored boxes are not vertically aligned. What causes this, and is there a way to align them vertically without nesting flexboxes within flexboxes?

Upvotes: 2

Views: 63

Answers (4)

Youssouf Oumar
Youssouf Oumar

Reputation: 45963

By removing flex:1; on that div div, you get what (I think) you want.

Setting flex:1 means every box would take 1/5 of the parent's height. And since you have this fixed height on the parent, boxes are taking an height that is bigger than what is normally made with their content and padding.

Or you you could remove that height: 500px; from the parent, and keep everything as it is, like so: 

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  border: 1px solid black;
}

div div {
  padding: 30px 30px;
  width: 20%;
  text-align: center;
  flex:1;
}

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

Upvotes: 1

Alobar
Alobar

Reputation: 65

Here you can find a bunch of ways to vertically center text: How do I vertically align text in a div?

And this answer to the previous question tells you how to do it without flex, nor position absolute, just using line-height: https://stackoverflow.com/a/4915529/11569755

That's useful when you know the height of your child div's, like in your example.

So you could add:

line-height: 40px;

to your div's, that would make it.

The number 40 comes from the height of the parent div (500px). As it has 5 children with the same flex properties, each one is 100px high, minus 60px of vertical padding (30px top, 30px bottom), that makes 40px.

You could also remove the padding and set the line-height to 100px.

If in a real case you won't know the height of the element, you should use one of the other approaches.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Since you asked to not use flexbox a possible approach is to use display: grid along with place-content: center

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  text-align:center;
  padding: 30px;
  width:20%;
  flex: 1;
  display: grid;
  place-content: center;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

and, as specified from other users, the position of the text in your example depends on the padding-top you set, as you can see from a web inspector

enter image description here

Upvotes: 0

Ibrahim Nergiz
Ibrahim Nergiz

Reputation: 116

Actually the reason the boxes look like that is: padding

To center text and content both horizontally and vertically in flex logic, you can add justify-content and align-items to the boxes.

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

For your question: 

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  max-width: 800px;
  height: 500px;
  border: 1px solid black;
}

div div
{
  width:20%;
  flex:1;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.red { background-color:red; }
.orange { background-color:orange; }
.yellow { background-color:yellow; }
.green { background-color:green; }
.blue { background-color:blue; }
<div class="container">
  <div class="red">RED</div>
  <div class="orange">ORANGE</div>
  <div class="yellow">YELLOW</div>
  <div class="green">GREEN</div>
  <div class="blue">BLUE</div>
</div>

Upvotes: 0

Related Questions