Multiple Images Centered on Page: Mobile Friendly
February 21st, 2016I was working on my new website: SoloDogs.net, and needed to have a series of three images. I wanted the desktop version to be centered on the page. I wanted the mobile version to have each image also centered, but stacked one on top of another. I also wanted the text below the images to be beneath the last image, no matter what. Here’s the solution:
<div style=”text-align:center;”> // Outer Container
<div style=”display:inline-block;”>image 1</div>
<div style=”display:inline-block;”>image 2</div>
<div style=”display:inline-block;”>image 3</div>
</div>
<div style=”clear: both;”>Text you want below the images</div>
Jill--------------
J. Olkoski
Aldebaran Web Design, Seattle
Jill Olkoski has a BS in Engineering, a BS in Computer Science and an MA in Clinical Psychology. She delights in using her advanced technical and psychological skills to help small business owners develop cost-effective and successful websites.