Center text vertically

Asked

Viewed 584 times

3

I’m trying to make a DIV for a subscription with a photo (24x24) next.

I want to center this text vertically, according to the size of the photo. I tried to use vertical-align: middle, but it didn’t seem to have any effect.

body {
  padding: 50px;
  font: 14px Verdana, Helvetica, Arial, sans-serif;
  background: #444;
  color: #FFF;
}

.assinatura {
  vertical-align: middle;  
  line-height: 24px;
}
<footer style="float: right;">
    <div class="assinatura">
        Este texto eu quero no centro
        <img src="https://i.stack.imgur.com/yA3Te.png?s=24&g=1" />
    </div>
</footer>

css

  • Yeah, I got to see this answer, but it hadn’t connected me that the alignment was on the wrong tag.

2 answers

4

Just put vertical-align: middle; on the tag img, then the texts inline that are next to the image will accompany its "base", with this it is also possible to adjust the base below the texts or above, similar to this Align icon with text vertically

An example:

body {
  padding: 50px;
  font: 14px Verdana, Helvetica, Arial, sans-serif;
  background: #444;
  color: #FFF;
}

footer > div > img {
   vertical-align: middle;
   }
<footer style="float: right;">
    <div>
        Este texto eu quero no centro
        <img src="https://i.stack.imgur.com/yA3Te.png?s=24&g=1" />
    </div>
</footer>

4


I don’t know if I understand you correctly, but all you had to do was add the signature class to the image.

body {
  padding: 50px;
  font: 14px Verdana, Helvetica, Arial, sans-serif;
  background: #444;
  color: #FFF;
}

.assinatura {
  vertical-align: middle;
  line-height: 24px;
}
<footer style="float: right;">
  <div>
    Este texto eu quero no centro
    <img src="https://i.stack.imgur.com/yA3Te.png?s=24&g=1" class="assinatura" />
  </div>
</footer>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.