如何将多个图像放在列中，并在它们下面居中放置文本？答案

【问题标题】：How do I put multiple images in columns with centered text under them?如何将多个图像放在列中，并在它们下面居中放置文本？
【发布时间】：2022-11-26 23:49:52
【问题描述】：

我想在列中的每个图像下方放置带有居中文本的图像，我还想将每个图像的大小调整为特定的宽度和高度，并且我还想这样做，以便当文本太长时文本变得分成两行，但我不希望它同时上下移动图像。我应该使用什么代码？我使用了我在互联网上找到的一些代码，这些代码链接如下，但没有像我预期的那样工作（代码可以在下面找到）。谢谢！

到目前为止，我已经使用了这段代码，但它没有使文本居中并且还跳过了我不想发生的地方。请检查我附加的图像以查看跳过的点skipped spot

HTML
<div class="column">
<img src="extra/road96.jpg" alt="Road 96"style="width:180px;height:180px;"/\>
<a class='neon-button' href='https://www.mediafire.com/file/4a05b4tkaal5e50/Road_96.zip/file'\>Road 96
<a/>
<div/>

CSS
    .column {
float: left;
width: 13.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
}
.sjamg {
text-align: justify;
width: [width of img];
}
.sjamg img {
display: block;
margin: 0 auto;
    }

【问题讨论】：

标签： html css image

【解决方案1】：

尝试使用 flex，并通过使用 flex-direction 将容器项目的方向更改为 Column

.main-container {
display: flex;
width: 100%;
height: 100vh;
flex-direction: Column;
justify-content: space-evenly;
}

.main-container p {
margin-left: 64px;
height: 5%;
width: auto;

}


.small-container {
height: 180px;
width: 180px;
background-color: blue;
}

<!DOCTYPE html>
<html>

<body>
    <div class="main-container">
        <div class="small-container"></div>
        <p> your text </p>
        <div class="small-container"></div>
        <p> your text </p>
        <div class="small-container"></div>
        <p> your text </p>
        <div class="small-container"></div>
        <p> your text </p>
    </div>

</body>

</html>

【讨论】：