Member Avatar for andersoAmber44

Hi There,

I'm trying to figure out the best method of marking up this list of images with captions. The images vary in height and the captions are aligned to the right of the images, sometimes with two lines of text and as close to vertically centered with the image as possible
See the below image for what I'm trying to achieve. I'd be tempted to use a definition list, floating the captions to the right, but getting each bit of text aligning correctly without styling each individual caption has got me stumped.

There will be a lot more images than those shown (the grey boxes are representing the images just to clarify), so a solution that works without resorting to applying diferent classes to each caption would be amazing!

  • 3 Contributors
  • 3 Replies
  • 90 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

Two quick points before code: use semantic markup so captions stay tied to each image, and use flexbox to vertically center a multi-line caption next to an image of any height. The semantic choice is <figure>/<figcaption> (good for accessibility) and the layout is handled with a single rule so you do not need per-item classes. See the HTML element notes and flexbox basics on MDN for details: figure element on MDN and Flexbox basics on MDN.

Example (minimal):

<ul class="gallery">
  <li>
    <figure>
      <img src="..." alt="descriptive alt text">
      <figcaption>Caption text that may wrap to two lines and stays vertically centered.</figcaption>
    </figure>
  </li>
</ul>

.gallery { list-style:none; margin:0; padding:0; }
.gallery figure { display:flex; align-items:center; gap:1rem; margin:0; }
.gallery img { display:block; max-width:200px; height:auto; }
.gallery figcaption { max-width:300px; }

Notes: if using Bootstrap, the same effect can be achieved with d-flex align-items-center on the figure. Ensure img is display:block to avoid inline spacing issues. Use meaningful alt text and prefer figcaption over non-semantic wrappers for accessibility. As pointed out, include the screenshot in the post so responders can match exact spacing; and while flagged possible spam, the approach above applies if this is a genuine layout question.

Recommended Answers

All 3 Replies

Member Avatar for Dani

See the below image for what I'm trying to achieve.

Sorry, not seeing the below image? You can drag it into the text box or click the little paperclip in the editor toolbar.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.