如何将图像水平并排对齐，并在下方显示标题

Question

我希望我的三张图片水平对齐，每张图片下的标题都像这个链接：(http://www.renaldi.com/projects/(

我试图做这些，但失败了。这是我的代码：

.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>

如何解决它们？

Answer 1

您可以通过添加一个包装容器并对其应用一些 flexbox css 来实现这一点。将容器设置为具有行的 flex 方向是将它们水平对齐的原因，而将 flexdirection 设置为 photos 类上的列是将标题放置在图像下方的原因。有关弹性框的详细信息，请参阅 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;
}

工作示例：https://jsfiddle.net/Matthew_/ro1kahj0/2/

Answer 2

您可以使用图形和无花果标题来回答您的标题问题。 它增加了您网站的可访问性。

   <figure>
        <img src="project1.png" alt="A picture of Manhattan">
        <figcaption>Manhattan Sunday</figcaption>
   </figure>

Answer 3

• 具有弹性方向行的父容器
• 每个照片子项的弹性方向列
• 将项目居中对齐到中心图像(感谢@Matthew(

添加了背景颜色，以便您可以看到每个元素的范围

.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

我一直在为这些类型的布局使用 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：

<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>