CODEWITHSUNDEEP
htmlcss
Sara Ree
Sara Ree

Reputation: 3543

How do I align the text and accompanied image horizontally?

Here is the result of the code below:

enter image description here

If I make the first image bigger then I have this one (The text goes far below the image) :

enter image description here

Now the question is:

How do I align each text and image horizontally? (I want the text on the middle of the image not on the lower edge)

<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'>
<b>Diamonds: {valueY.value}</b>
</span><br>
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'><b>Performance: {Performance}</span>

Upvotes: 0

Views: 1218

Answers (2)

Shihab
Shihab

Reputation: 197

To make the text horizontally centered comparing to the images you can make it's position absolutely & push it 50% from top and push it back of it's own height. So it will be vertically centered comparing to the left image/icon. Here is what I mean:

<div class="wrapper">
  <img src='https://picsum.photos/200/300/?random'>
  <span>
    <b>Diamonds: {valueY.value}</b>
  </span><br>
</div>

<div class="wrapper">
  <img src='https://picsum.photos/200/300/?blur'>
  <span>
    <b>Performance: {Performance}</b>
  </span>
</div>

I have wrapped each block within a div element so I can make the div position relatively.

Here is the css:

.wrapper { position: relative; }
img {
  vertical-align: bottom; margin-right: 10px; 
  width:32px; height:30px;
}
span {
  font-size:14px; color:#000000; display: inline-block; 
  position: absolute; 
/*  push it by 50% from top  */
  top: 50%;
/*  push it back of it's own height  */
  transform: translateY(-50%);
}

Here is the live preview

Upvotes: 1

Sherif Tarek
Sherif Tarek

Reputation: 329

Just Convert the image vertical-align property from bottom to top. It's better to divide your structure into divs that will make controlling of elements designs much easier.

Upvotes: 2

Related Questions