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

要让图片在中间对齐，您应该向vertical-align添加middle #exchangeRate img。

你也错过了<div id="buttonDescription">的结束div fag。

这是更新后的代码;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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包含图像时，如何应用垂直居中？

2 个答案: