当我的 DIV 包含图像时如何应用垂直居中？

Question

始终以这种方式居中。我想让所有内容在下面的中心垂直对齐，但在底部对齐。我怎样才能使它对齐到中间？

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

要使图像在中间对齐，您应该将 middle 的 vertical-align 添加到 #exchangeRate img。

您还缺少 <div id="buttonDescription"> 的结尾 div fag。

这是更新后的代码；

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>

Answer 2

在这里，让我知道你的想法

#exchangeRate {
  padding-top: 10px;
  display: flex;
  align-items: center;
}

我也稍微更改了您的标记

<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" />
    <span>1 coin =</span>
    <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" />
    <span id="currencyValueInUsd">0.0</span>
  </div>
</div>

https://jsfiddle.net/p9hunvje/24/

当我的 DIV 包含图像时如何应用垂直居中？

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

html

css

vertical-alignment

centering