How do I apply vertical centering when my DIV contains images?

Question

Always with this centering. I want to keep everything vertically aligned in the center in the following but its aligning on the bottom. How can I make it align to the middle?

div.more_info {
    display: none;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    padding: 5px;
}

#exchangeRate {
    padding-top: 10px;
    vertical-align: middle;
}

<div id="buttonDescription">
    One of the currencies to help developing nations is Electroneum. <br/> 
    <div id="exchangeRate">
        <img width="25" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2137.png" alt="Electroneum" />
        1 coin = 
        <span id="currencyValueInUsd">
            <img width="25" src="https://previews.123rf.com/images/iulika1/iulika11711/iulika1171100083/89037076-dollar-sign-usd-currency-symbol-black-icon-on-transparent-background-vector-illustration.jpg" alt="Dollar sign" />
            0.0
        </span> 	
    </div>

Answer 1

To get the images to align themselves in the middle, you should add a vertical-align of middle to #exchangeRate img.

You are also missing the closing div fag for <div id="buttonDescription">.

Here is the updated code;

div.more_info {
  display: none;
  background-color: #ffffff;
  color: #000000;
  text-align: left;
  padding: 5px;
}

#exchangeRate {
  padding-top: 10px;
  vertical-align: middle;
  line-height: 10px;
}

#exchangeRate img {
  vertical-align: middle;
}

<div id="buttonDescription">
  One of the currencies to help developing nations is Electroneum. <br/>
  <div id="exchangeRate"><img width="25" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2137.png" alt="Electroneum" /> 1 coin =
    <span id="currencyValueInUsd"><img width="25" src="https://previews.123rf.com/images/iulika1/iulika11711/iulika1171100083/89037076-dollar-sign-usd-currency-symbol-black-icon-on-transparent-background-vector-illustration.jpg" alt="Dollar sign" />
      0.0</span>
  </div>
</div>