html - 在html中插入图像后编写文本

Question

我正在尝试在 html 页面上的图像下方编写描述，但文本会自动对齐到图像的右侧。我是初学者，请帮助！提前谢谢！

.images {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

#my_freaking_id {
  color: red;
  font-size: 50px;
}

<h1>Pictures</h1>
<div class="images">
  <img src="https://picsum.photos/200/200?random">
  <p>Image 1</p>
</div>
<div class="images">
  <img src="https://picsum.photos/200/200?random">
  <p>Image 2</p>
</div>

<div id="my_freaking_id">
  It has been a long day, without you my friend and I will tell you all about it when I see you again!<br>I hope our friendship lasts forever!
</div>

标签： htmlcss

Answer 1

也许只是添加到CSS？

.images img, .images p {
  display:block;
}