如何使用 CSS 每行放置一个 inline-block div？

Question

我正在处理这个页面http://www.donchisciotte-lucca.it/it/offerte

如您所见，我想要 4 张图片，每张图片上有 3 个 div（标题、说明和按钮）。我将 3 个 div 放在 inline-block 中，以便将它们垂直居中放置在单张图片上，但它们都显示在同一行中。它们应该每行一个，但我尝试的所有方法都不起作用。

我该如何解决这个问题？

非常感谢

Answer 1

无论哪种方式，我认为您都会考虑变通方法，但我认为使用 display:block 并找到获得正确垂直间距的方法比使用 display:inline-block 并且不得不强迫他们在不同的线路上。那么如何制作 .offerte .g-array-item div 项目 display:block 然后给他们一个 % margin-top，例如：margin-top:30%.

试试看效果如何？

Answer 2

您应该将整个内容包装在 display:inline-block div 中，而不是三个元素中的每一个都有自己的。将包装 div 与您使用的任何内容居中。然后像往常一样输入，每件事都可以在自己的行上（或使用 display:block）。

这里有一个简单的示例来演示它

body {
  text-align: center;
}
div {
  display: inline-block;
  background: lightgray;
}
span {
  display: block;
}

<div>
  <span>Img</span>
  <span>Text</span>
  <span>Button</span>
</div>

如何使用 CSS 每行放置一个 inline-block div？

How to place inline-block divs one per line with CSS?

css

positioning

display