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,
Images of America: US National Library of Medicine Cover
Images of America: US National Library of Medicine Cover
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.
NLM Logo. Caption example which illustrates how a caption displays to show how a long string of characters behaves as caption.
FAES logo. Caption example which illustrates how a caption displays to show how a long string of characters behaves as caption.
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.
NLM Logo. Caption example which illustrates how a caption displays to show how a long string of characters behaves as caption.
FAES logo. Caption example which illustrates how a caption displays to show how a long string of characters behaves as caption.
Two images WITH shared caption - Single caption centered between two images
- Caption is aligned centered below the two images.
Images from Isaac W. Blackburn, Gross morbid anatomy of the brain in the insane. Washington, DC: GPO, 1908. Isaac Blackburn, the first neuropathologist hired by St. Elizabeths, ran the laboratory of the hospital for several decades beginning in 1884. Using autopsy and the new study of psychopathology, scientists at St. Elizabeths studied the physical manifestations of mental illness.
Courtesy National Library of Medicine
Last Reviewed: January 6, 2022