Skip Navigation Bar

Several Centered Images Examples

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

  1. Three or more images WITHOUT any captions
  2. Two images WITH captions
  3. Two images WITH captions - Captions have a lot of text to show how amount of text impacts vertical alignment
  4. 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.
NLM logo FAES logoNLM logo

Two images WITH captions

  • Need to test different caption class attributes if images are diffrent widths,

NLM logo
Images of America: US National Library of Medicine Cover

FAES logo
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
NLM Logo. Caption examle which illustrates how a caption displays to show how a long string of characters behaves as caption.

FAES logo
FAES logo. Caption examle 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.
Plate 31: The superior surface of a brain of chronic dementia with cerebral atrophy – a photograph of the top exterior surface of a brainPlate 47: A case of chronic acquired circumscribed internal hydrocephalus – a photograph of a cross section of a brain from the side.

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