CODEWITHSUNDEEP
htmlcss
Ajaii
Ajaii

Reputation: 41

Display text and image inside 'div'

I am trying to display an image inside a div and text below the image. If I set image property float: left, the text is displayed in the same line. I want to display the text in the next line in the center. 

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

How to display the text 'First' in the next line in the center? The image should be present in the left side of the div

Upvotes: 0

Views: 193

Answers (5)

Mr_Green
Mr_Green

Reputation: 41832

Try this:

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

Don't complicate things by using clear fix or overflow: hidden to an unnecessary floating element later.

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

set p width to 100% 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;
}
.group1 p {
  width: 100%;
  float: left;
}
.group1 img {
  float: left;
}
<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>

Upvotes: 1

JJJ
JJJ

Reputation: 3332

Use display:block so that your span elements are treated like block elements. Also, use clear:both so that your elements will not be affected by the floated elements.

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

DEMO

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You should not forget to clear the float when you use it. You may google about clearfix. In most case we can just use overflow:hidden; to the parent.

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

Upvotes: 3

Emre Acar
Emre Acar

Reputation: 920

One <br/> to rule them all.

Try this.

.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>
  <br/>
  <p> <span class='title'> First </span>
  </p>
  <p> <span> second </span>
  </p>
</div>

Upvotes: 0

Related Questions