Best way to align captions with varying width images?
I've got a layout where I want the captions to always be aligned with the left edge of the images, which can vary in orientation and aspect ratio. What's the best markup and css to achieve this? I've tried setting the parent container of the image and caption as a flex box set to width fit-content but it's buggy and causing other issues so I'm wondering if there's a nicer way that my brain can't figure out. Ideally the captions will align horizontally but I'm willing to sacrifice that in order to get vertical alignment with the images correct.
3 Replies
you can put the image and the caption in one div then you give him display flex justify content: left and flex direction column (so that it is horizontally aligned) and now the caption will always be aligned with the start of an image no matter the images width or height, cus the image and the caption are both aligned to the left of a parent div
Using a figure and figcaption would be the most semantic approach
Sorry, I did a poor job of explaining the issue. They're currently set to display flex, justify content left and flex direction column. But I've actually changed the layout a bit now for other reasons so I no longer need to figure this out haha. Thanks for your answers though!