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>

Answer 1

也许只是添加到 css？

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