html - 在 'div' 内显示文字和图片

Question

我正在尝试在 div 内显示图像并在图像下方显示文本。如果我设置图像属性 float: left，文本显示在同一行中。我想在中心的下一行显示文本。

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
img {
  float: left;
}

<div class='group1'>
  <p> <span> <img src='img1.png'> </span>
  </p>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>

如何在中心的下一行显示文本'First'？图像应该出现在 div 的左侧

Answer 1

使用时不要忘记清除 float 。你可以用谷歌搜索 clearfix。在大多数情况下，我们可以只对父级使用 overflow:hidden;。

.group1 {
  border: 2px solid black;
  width: 180px;
  height: 180px;
  text-align: center;
  display: inline-block;
  font-family: "Open Sans";
}
.title {
  font-size: 14px;
}
img {
  float: left;
}
.group1 > p:first-child{
  overflow: hidden;
  }

<div class='group1'>
  <p> <span> <img src='img1.png'> </span>
  </p>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>