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来实现。将容器设置为具有行的柔性方向是将它们水平对齐的方式，将flexdirection设置为photos类上的列是将标题置于图像下方的功能。有关flexbox的更多信息，请参见https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML

new_text <- function(pattern, replacement, text) {
  txt <- text
  function(pattern, replacement) {
    txt <<- gsub(pattern, replacement, txt)
    txt
  }
}

Replace <- new_text(p, r, text = text_example)

Map(Replace, as.list(dict[[1]]), as.list(dict[[2]]))

CSS

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

工作示例：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>

如何将标题下方的图像水平并排对齐？

4 个答案: