Center text vertically [duplicate]

Question

Center text vertically [duplicate]

Navigation

#1 by (4 votes)
#2 by (4 votes)

3

I'm trying to make a DIV for a signature with a photo (24x24) next to it.

I want to center this text vertically, according to the size of the photo. I tried to use vertical-align: middle , but it did not seem to work.

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

asked by anonymous 23.03.2017 / 20:40

2 answers

4

Simply put vertical-align: middle; in the img tag, then the inline texts that are next to the image will accompany your "base", with this you can also adjust the base below the texts or above similar to this one 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>

23.03.2017 / 20:42

Console Edge? Exist? Sine Calculation with Python

score 4 · Accepted Answer

I do not know if I understood correctly, but just missed you adding the signature class in 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>