How to align caption to image?

Question

I would like to ask about how I can align my caption to my image, I have a really long text. Is it possible?

<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180">
<figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands.
</figcaption>
</figure>

css

figure {
display: inline-block;
margin: 20px;
}

figure img {
vertical-align: top;
}

figure figcaption {
text-align: center;
}

The code above resulted to this;

I COULDN'T UPLOAD IT BECAUSE IT SAYS I NEED 10 REPS TO POST IMAGES, I'M VERY VERY SORRY

Answer 1

Just make up a div with the width of the image. Then use the image as backgroundimage and align your content in the middle of the div.

Example below:

.div{
display: flex;
height: 200px;
width: 100%;
background-image: url("paper.gif");
}

.caption{
margin: auto;
}

Answer 2

If you want to have text with max-width of the image, withou flex, background img ... just change display of figure to table and set its width to 1px

figure {
  margin: 20px;
  display: table;
  width: 1px;
}

https://fiddle.jshell.net/b201khsy/

Answer 3

I think you should put text-align:center in figure

figure {
    text-align:center
}

Answer 4

May be it will shot out your problem.

figure {max-width:330px;text-align:center;width:100%;}

Answer 5

Assuming you want to adjust the width of the figure to the width of the image, without knowing what the width in pixels is at design-time, you can use min-content for a value.
This will restrict the width of the container to the width of its content; in this case, either the image, or the longest word in the text. See MDN .

 figure { display: inline-block; margin: 20px; width: -webkit-min-content; width: -moz-min-content; width: min-content; } figure img { vertical-align: top; } figure figcaption { text-align: center; } 

 <figure> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180"> <figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands. </figcaption> </figure> 

Disclaimer: as you can see by the vendor prefixes, this is an experimental technology, which may or may not be supported by all browsers. (Read: not by IE or Edge, only Firefox and Chrome.) Use with care.