These examples uses the CSS file
<link rel="stylesheet" href="/styles/responsive_images.css" media="all" />
As the view port gets below 481 pixels, the images align centered vertically.
Examples below show
- Three or more images WITHOUT any captions
- Two images WITH captions
- Two images WITH captions - Captions have a lot of text to show how amount of text impacts vertical alignment
- Two images WITH captions - Single caption centered between two images
Three or more images WITHOUT any captions
- Images vertically centered. Images should be close to the same height.
Code Resources
* To justify the row on the page https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
* To justify the middle image in the center. https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Code example:<div class="row justify-content-center">
<div class="col-md-4"><img class="img-fluid" src="/web/documentation/TemplateDocumentation/nlm_neh_common_interests_2015_fig1-demo.png" alt="NLM logo" /></div>
<div class="col-md-2 d-flex justify-content-center"><img class="img-fluid" src="/web/documentation/TemplateDocumentation/faes-debakey-fellow-program-faes-logo-demo-shorter.jpg" alt="FAES logo" /></div>
<div class="col-md-4"><img class="img-fluid" src="/web/documentation/TemplateDocumentation/nlm_neh_common_interests_2015_fig1-demo.png" alt="NLM logo" /></div>
</div>
Two images WITH captions
- Need to test different caption class attributes if images are diffrent widths,
Two images WITH captions - Captions have a lot of text to show how amount of text impacts vertical alignment
- Need to test different caption class attributes if images are diffrent widths and as more text is added.
Two images WITH captions - Each image had a different dimension. Using SnagIt, changed the Canvas dimensions so that each image had the same dimensions.
The image on the left has extra space above and below it.
The image on the right has extra space to the left and right.
Captions have a lot of text to show how amount of text impacts vertical alignment.
- Need to test different caption class attributes if images are diffrent widths and as more text is added.
Two images WITH shared caption - Single caption centered between two images
- Caption is aligned centered below the two images.
Last Reviewed: January 6, 2022