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

时间:2014-12-03 08:38:12

标签: html css

我正在尝试在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>
&#13;
&#13;
&#13;

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

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

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

<强> DEMO

答案 2 :(得分:1)

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;

答案 3 :(得分:0)

一个<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;

答案 4 :(得分:0)

试试这个:

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

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