How to align images horizontally side by side with captions underneath? - html

Question

I want my three images to align side by side horizontally with captions under each of them, like in this link:(http://www.renaldi.com/projects/)
I tried to do them but failed. Here are my codes:
.photos {
display: flex;
justify-content: center;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
}
<div class="photos">
<img class="image" src="Project1.png">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png">
<div class="word">I want your love</div>
</div>
How to fix them?

Answer 1

You can achieve this by adding a wrapper container, and applying some flexbox css to it. Setting the container to have a flex direction of row is what aligns them horizontally, and setting the flexdirection to column on the photos class is what places the caption beneath the image. For more info on flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="container">
<div class="photos">
<img class="image" src="Project1.png" >
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png" >
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png" >
<div class="word">I want your love</div>
</div>
</div>
CSS
.container {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.photos{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.image{
display:block;
width:30%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
Working example: https://jsfiddle.net/Matthew_/ro1kahj0/2/

Answer 2

You can use figure and figcaption to answer your caption question. It adds accessibility to your website.
<figure>
<img src="project1.png" alt="A picture of Manhattan">
<figcaption>Manhattan Sunday</figcaption>
</figure>

Answer 3

a parent container with flex direction row
flex direction column for each photos child
align items center to center image (thanks #Matthew)
added background color so you can see the extent of each element
.photos {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fafafa;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
background: #f0f0f0;
}
.photo-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
<div class="photo-list">
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=1">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=2">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=3">
<div class="word">I want your love</div>
</div>
</div>

Answer 4

I have been using CSS grid for these types of layouts:
CSS:
.threeColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
figure.threeColumnGridItem {
display: block;
padding: 10px;
text-align: left;
background-color: #EEE;
margin-inline-start: 0;
margin-inline-end: 0;
}
figure.threeColumnGridItem img {
display: block;
width: 100%;
}
figure.threeColumnGridItem figurecaption {
display:block;
width: 100%;
font-size: 1rem;
margin: 0;
}
HTML:
<div class="threeColumnGrid">
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/300/300" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/400/400" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/600/600" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
</div>