CODEWITHSUNDEEP
htmlcss
Pascal
Pascal

Reputation: 66

DIV element isn't placed correctly next to an image

So I'm questioning myself why the div with the class champ_info isn't placed next to the image because the image is an inline-block element. So the Text in my div element lies under the image instead of next to the image. My code is below.

.champ_info {
  background: #0b2e33;
  color: white;
}

.champ_container {
  background: #10474e;
}

.champ_img {
  border: 3px solid #1ba9bd;
  border-radius: 50%;
  margin: 5px;
  height: 5rem;
  width: auto;
}
<div class="champ_container">
  <img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
  <div class="champ_info">
    Some Text
  </div>
</div>

Thank you in advance.

Upvotes: 1

Views: 27

Answers (2)

Jibin Joseph
Jibin Joseph

Reputation: 1305

I personally find making inherently block level elements inline counter intuitive. Flex box is the perfect solution to your problem. 

.champ_container {
  width: 40%;
  margin: 0 auto;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background: #10474e;
}

.champ_info {
  background: #0b2e33;
  color: white;
  width: 100%;
  height: 100%;
}

.champ_img {
  border: 3px solid #1ba9bd;
  border-radius: 50%;
  margin: 5px;
  height: 5rem;
  width: auto;
}
<div class="champ_container">
  <img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
  <div class="champ_info">
    Some Text
  </div>
</div>

Upvotes: 3

Aniket G
Aniket G

Reputation: 3512

<div> is a block element, which means it takes up the whole line. Put display: inline; inside the css for the <div> and it places it next to the image like you wanted.

Add vertical-align: top; if you want the text to align to the top. Since the image and the text align to the bottom of the parent, you need to manually set them to align to the top. 

.champ_info {
  background: #0b2e33;
  color: white;
  display: inline;
  vertical-align: top;
}

.champ_container {
  background: #10474e;
}

.champ_img {
  border: 3px solid #1ba9bd;
  border-radius: 50%;
  margin: 5px;
  height: 5rem;
  width: auto;
}
<div class="champ_container">
  <img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
  <div class="champ_info">
    Some Text
  </div>
</div>

Upvotes: 2

Related Questions