[英]How to align images horizontally side by side with captions underneath?
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/ ) 我希望我的三个图像与每个标题下方的标题水平并排对齐,例如此链接:( 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? 如何解决?
You can achieve this by adding a wrapper container, and applying some flexbox css to it. 您可以通过添加包装容器并对其应用一些flexbox CSS来实现。 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. 将容器设置为具有行的柔性方向是将它们水平对齐的方式,将flexdirection设置为photos类上的列是将标题置于图像下方的功能。 For more info on flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 有关flexbox的更多信息,请参见https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML 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 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/ 工作示例: https : //jsfiddle.net/Matthew_/ro1kahj0/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>
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>
I have been using CSS grid for these types of layouts: 我一直在将CSS网格用于以下类型的布局:
CSS: 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: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.