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

【问题标题】：How do I apply vertical centering when my DIV contains images?当我的 DIV 包含图像时，如何应用垂直居中？
【发布时间】：2018-09-27 17:34:36
【问题描述】：

始终以这种居中。我想让下面的所有东西都垂直对齐在中心，但它在底部对齐。我怎样才能使它与中间对齐？

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>

【问题讨论】：

标签： html css vertical-alignment centering

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：