CODEWITHSUNDEEP
htmlcss
Anj Briones
Anj Briones

Reputation: 81

How to align caption to image?

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

Upvotes: 2

Views: 1240

Answers (5)

Mr Lister
Mr Lister

Reputation: 46559

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.

Upvotes: 0

Sunil Singh Rawat
Sunil Singh Rawat

Reputation: 96

May be it will shot out your problem.

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

Upvotes: 0

Autista_z
Autista_z

Reputation: 2541

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/

Upvotes: 1

Littlee
Littlee

Reputation: 4327

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

figure {
    text-align:center
}

Upvotes: 0

Smokinggunz
Smokinggunz

Reputation: 388

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;
}

Upvotes: 2

Related Questions