如何在每个图像下按垂直和水平顺序设置图像？

Posted 2023-04-13

【中文标题】如何在每个图像下按垂直和水平顺序设置图像？

【英文标题】：How to set images under each image in vertical and horizontal order?

【发布时间】：2020-11-18 09:22:37

【问题描述】：

我想将图像和文本按如下垂直和水平顺序对齐：

预期图像：

我使用过 display: flex 和 flex-direction: row 以及 justify-content: space-evenly

但结果我得到了这张图片：

结果图片：

就如何按照第一张图片对齐项目提出一些想法。

【问题讨论】：

你不能只使用width: calc((100% / 4) - eventual-margins) 并让flex 属性对齐它们吗？

【参考方案1】：

您也可以尝试使用text-align: center、margin: auto 和display: flex。 justify-content 属性与display: flex 一起使用，我们可以使用它来使图像居中。更多详情，请查看this link.希望对您有所帮助！

【讨论】：

我认为是文本导致了对齐问题，而不是图像，我已经尝试过这个 css 属性@Programmer33

【参考方案2】：

您尝试过 html 表格吗？

通过使用表格的列和行，您可以将所有图标和文本按顺序排列。

在 w3schools 上了解有关 table 标签的更多信息：https://www.w3schools.com/html/html_tables.asp

【讨论】：

使用表格结构不是一个好主意，所以我更喜欢div和flexbox或grid

【参考方案3】：

.row display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
.items width: 20%; float: left; display: block; position: relative;
.items imgwidth:80%; height: auto; margin: auto; display: block;
.items pmax-width:90%;text-align: center; margin: auto; display: block;

<div class="row">
<div class="items">
<img src="https://img.icons8.com/wired/64/000000/change-user-male.png"/>
<p>lorem loremlorem lorem</p>
</div> 

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>loremlorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/cottage--v1.png"/>
<p>lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/office/160/000000/user-folder.png"/>
<p>lorem lorem lorem</p>
</div>

<div class="items">
<img src="https://maxst.icons8.com/vue-static/icon/collection-favorites.png"/>
<p>lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/dusk/64/000000/dog-house--v1.png"/>
<p>loremlorem lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>lorem lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/ultraviolet/120/000000/house-lannister.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/flat_round/64/000000/rental-house-contract.png"/>
<p>loremlor em lorem</p>
</div>
</div>

【参考方案4】：

试试这个

.flex-container 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly

.flex-container > *  // flex-items
  flex: 0 1 160px;  // 160px is sort of the maximum width, change it to suit your situation

如果行和列中有相同数量的项目，这将完美地工作，就像你的情况一样。

【参考方案5】：

为什么不使用display:grid？它在当前所有浏览器中都有good support，在 IE 中部分支持。

.row display:grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); align-items: center; justify-items: center; gap: 20px
.items width: auto; display: block; position: relative;
.items imgwidth:80%; height: auto; margin: auto; display: block;
.items pmax-width:90%;text-align: center; margin: auto; display: block;

<div class="row">
<div class="items">
<img src="https://img.icons8.com/wired/64/000000/change-user-male.png"/>
<p>lorem loremlorem lorem</p>
</div> 

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>loremlorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/cottage--v1.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/office/160/000000/user-folder.png"/>
<p>lorem lorem lorem</p>
</div>

<div class="items">
<img src="https://maxst.icons8.com/vue-static/icon/collection-favorites.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/dusk/64/000000/dog-house--v1.png"/>
<p>loremlorem lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/doodle/96/000000/user-male--v1.png"/>
<p>lorem lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/ultraviolet/120/000000/house-lannister.png"/>
<p>lorem lorem</p>
</div>

<div class="items">
<img src="https://img.icons8.com/flat_round/64/000000/rental-house-contract.png"/>
<p>loremlor em lorem</p>
</div>
</div>

【讨论】：

你最终得到了答案吗？