Can't make image label to be centered under the image

HTML-CSS
1

Hello,

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.

Example: https://codepen.io/freeCodeCamp/full/zNqgVx

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.

Code:

2

Hi welcome to the forum,
First of all, please checkout this codepen lesson,
next, you can’t comment html with /* */ use <!-- -->
do this things and next I will help you to solve the problem,

3

Hi, thanks for answering!

I have changed all the comments for what they should be.

4

try to add to the style:

figure{
  display: flex;
  flex-direction: column;
  align-items: center;
}

remind that you don’t need:

<!DOCTYPE html>
<head>
    <title>X tribute page</title>
    <style>
    </style>
 </head>
1 Like
5

Thanks, it works!!!

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).

6

Really sorry!
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?

7

Okay, I think I get it – display: flex works for all child elements, but everything under the child elements reverts back to display: block.

The label is my bad. I was thinking "my <img> needs a label, lets add a <label>" without thinking what are labels actually used for, now I have changed it to <figcaption>.

Thanks again for everything, now I know more important things (also now I have discovered the option to change text into code in my post on forum) < 3

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.