2

Plz wait before marking this question as duplicate or possible duplicate.
I aligned the child item vertically centered but the content i.e, text, of that child item wasn't aligned at the center of box initially. But when I added display:flex;, justify-content:center; & flex-direction:column; inside the child class, the text was vertically centered.

I checked these questions:
How to vertically align text inside a flexbox?
Is there a way to change the vertical-align of items inside flex-items?

Some answers helped me to vertically align the child item but it wasn't mentioned how to align the contents of child at its vertical center at middle.

HTML

<div class="flex-container">
<div class="flex-item">hello hello hello hello </div>
</div>

CSS before

.flex-container {
display: flex;    
justify-content:center;
align-items:center;
width: 300px;
height: 300px;
background-color: lightgrey;
text-align:center;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;

the result is:

enter image description here

after adding display:flex;, justify-content:center; & flex-direction:column;

CSS after

 .flex-item {
     background-color: cornflowerblue;
     width: 100px;
     height: 100px;
     display:flex;  //<---- added property supposed to be work on parent 
     justify-content:center; //<---- added property supposed to be work on parent
     flex-direction:column;  //<---- added property supposed to be work on parent

the result is:

enter image description here

I want to know if there is some other approach using flexbox to align the content of child at vertical center. Also, why adding parent properties i.e, display:flex;, justify-content:center; & flex-direction:column; worked on child class? Aren't these properties supposed to be applied & work only on parents?

Community
  • 1
  • 1
007mrviper
  • 459
  • 4
  • 20
  • Everything outside a flex container and inside a flex item is rendered as usual.So, this is the reason why you should apply same flex style inside a flex-item. And, I think this is the best solution, I don't think there is a better way to solve that using flex. – Teuta Koraqi Jun 15 '16 at 07:09
  • 1
    The scope of a [*flex formatting context*](https://www.w3.org/TR/css-flexbox-1/#flex-containers) is limited to a parent/child relationship. Descendants of a flex container beyond the children are not considered part of flex layout and will not accept flex properties. Hence, you will always need to apply `display: flex` (or `display: inline-flex`) to a parent element if you want to apply flex properties to the child. More details: http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Jun 15 '16 at 12:16

1 Answers1

0

Flex items can also be flex containers themselves, which is why you're solution worked. This is because your child item is also the parent item for the text nodes within. However, if you didn't want it to be a flex-container you could also use the property

vertical-align: center;

On the flex-item instead

Cameron637
  • 1,699
  • 13
  • 21