使用CSS的图片下方的文字

Question

我有一张看起来像这样的图像：

我需要将文字放在图片下方。

您能告诉我我要去哪里了吗？

.outer-circle {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  text-align: center;
  background-color: #dedede;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-div {
  align-items: center;
  justify-content: center;
  display: flex;
}

<div class="main-div">
  <div class="outer-circle">
    <img :src="Commments" style="width: 250px; filter: grayscale(100%); display: block;" />
  </div>
  <br />
  <p style="display: block; text-align: center;">No Comments</p>
</div>

Answer 1

在flex-direction: column上设置.main-div（默认设置为row）

也不需要<br>

.outer-circle {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  text-align: center;
  background-color: #dedede;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-div {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column
}

<div class="main-div">
  <div class="outer-circle">
    <img :src="Commments" style="width: 250px; filter: grayscale(100%); display: block;" />
  </div>
 
  <p style="display: block; text-align: center;">No Comments</p>
</div>

Answer 2

如果您想在图片上添加描述，请使用以下内容：

<figure>
 <img :src="Commments" style="width: 250px; filter: grayscale(100%); display: block;">
 <figcaption>no comment</figcaption>
</figure>