在＆＃39; div＆＃39;内显示文字和图片

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何显示文字＆＃39; First＆＃39;在中心的下一行？ 图像应该出现在div的左侧

Answer 1

使用它时，不要忘记清除浮子。你可以谷歌关于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>

Answer 2

使用display:block，以便将span元素视为块元素。此外，使用clear:both以使您的元素不受浮动元素的影响。

 .title {
font-size: 14px;
display:block;
clear:both;
}

<强> DEMO

Answer 3

将p宽度设置为100％float：left

＆＃13;

＆＃13;

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

＆＃13;

<div class='group1'>
  <p> <span> <img src='http://placeimg.com/50/50/any'/> </span>

  </p>
  <p> <span class='title'> First </span>

  </p>
  <p> <span> second </span>

  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

一个<br/>来统治它们。

试试这个。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个：

img {
    display: block; /* instead of float: left */
}

稍后不要将clear fix或overflow: hidden复制到不必要的浮动元素中，这样做会让事情变得复杂。