使用 css 显示 3 个带有标题的图形

Question

我有 3 个带标题的数字。我希望它们在页面中间水平对齐，并排排列，但我只能得到三个垂直的。仅使用HTML5和CSS，我该如何做到这一点？

这是我的 HTML：

<div class="row">
<figure>
<img src="person-3593657_960_720.jpg" alt="Run">
<figcaption>Running</figcaption>
</figure>
<figure>
<img src="people-2581913_1280.jpg" alt="Shopping">
<figcaption>Shopping</figcaption>
<figure>
<img src="family-2609528_640.jpg" alt="people jumping in air">
<figcaption>Spending time with friends & family</figcaption>
</figure>
</div>

这是我的 CSS：

.row figure {
display: flex;
flex-flow: column;
padding: 5px;
}
.row figure img {
margin:auto;
padding:auto;
width: 30%;
box-shadow: rgb(101, 101, 101) 10px 10px 25px; 
}
.row figure figcaption {
color: rgb(19, 7, 122);
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}

Answer 1

将flex-flow: column;更改为flex-flow: row;或flex-flow: row-reverse;

Answer 2

缺少结束数字标签，这是您无法实现所需目标的原因之一。

我使用display: flex并隐含地提到flex-direction: row(可选(来水平布置图形，并通过指定width: 100%;它将占用容器的全宽(100%(;在这种情况下，身体元素。

justify-content: center将div 的内容居中。

.row {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
}
figure {
margin: 0;
margin-right: 20px;
/*
The below properties are demo purpose. Feel free to change it to fit your needs. 
*/
width: 100px;
height: 100px;
background: blue;
}

<div class="row">
<figure>
<img src="person-3593657_960_720.jpg" alt="Run">
<figcaption>Running</figcaption>
</figure>
<figure>
<img src="people-2581913_1280.jpg" alt="Shopping">
<figcaption>Shopping</figcaption>
</figure>
<figure>
<img src="family-2609528_640.jpg" alt="people jumping in air">
<figcaption>Spending time with friends & family</figcaption>
</figure>
</div>