CODEWITHSUNDEEP
htmlcss
Sirisian
Sirisian

Reputation: 447

How to fill the width under an image with a caption without defining the width of the caption?

I have a blog type format with text and images with captions below them. My images are varying widths with long captions. I'd like the caption to wrap below the image with the image and caption centered on the screen. How can I accomplish this with HTML and CSS?

(My friend asked me this, so I'll answer it below since he spent 4 hours and couldn't find the solution online).

Upvotes: 0

Views: 36

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105923

display:table works fine too:

.image-caption-container {
  display:table;
  width:1%;
  margin:auto;
}
div class="container"> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div class="image-caption-container">
  <div class="image-caption">
    <img src="http://lorempixel.com/320/320" />
    <div>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
        modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
        qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div>
  </div>
</div>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
eum fugiat quo voluptas nulla pariatur?
</div>

Upvotes: 1

Sirisian
Sirisian

Reputation: 447

This solution requires flex. I'm not sure of any other method to get the same result.

HTML:

<div class="container">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  <div class="image-caption-container">
    <div class="image-caption">
      <img src="http://i.imgur.com/YJYNTno.jpg">
      <div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
  </div>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>

CSS:

.image-caption-container
{
  text-align: center;
}
.image-caption
{
  display: inline-flex;
  flex-flow: column nowrap;
}
img
{
  flex: 0 0 auto;
  display: block;
  width: 300px;
  height: 300px;
}
.image-caption > div
{
  flex: 0 0 auto;
  display: flex;
  flex-flow: row wrap;
}
p
{
  flex: 1 1 0px;
  width: 0;
  text-align: left;
}

JSFiddle:

https://jsfiddle.net/r58wz601/6/

Upvotes: 0

Related Questions