I am working on the freeCodeCamp tribute page project, and have trouble creating a
centred label under the image. Same as in the tribute page for dr. Borlaug under the image I want to have label (in the example it says “Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.”), which is centred relative to the image.
On my page I am using flexbox - I have applied it to id=“main”. Than I made my flexbox into columns using flex-direction: column and gave it align-items: center (all done to id=“main”). I have thought that this will make all the children also columns and center. The problem is with the label under image which goes not under it but besides, on the right.
I have looked and found info that maybe label went back to being the default (flex-direction: row), as it is not direct child of id=“main” but rather id=“img-div”. So I’ve put flex-direction: column to label, without any success. I know that if I use br after image link in HTML it moves the label under the image, but it goes to the left and I can not force to move it anywhere, even with text-align: right or justify-content: flex-end.
The thing that interest me the most is why the display:flex applied to id=“main” is not working on my label. Perhaps I did some mistake in my code. If anything is unclear I will try to specify.
For future can You explain why I need to add display: flex again? I thought it is applied to all of the child elements, in my example it applies for example to h2 element which is at the same level as figure (at least I think so).
sometimes I provide the soluution without explain anything,that’s bad but I’m working on it.
your h2 at the same level of your figure,
but your label is inside your figure (that has: display: block default style)
ps. why the text is inside a label?