關於display:inline-block的元素不在同一水平線

本文轉載自查看原文 2018-07-05 13:43 842 工作中遇到的前端問題/ display:inline-block

<div class="form-group" style="padding: 0 20px">
 <div><span class="warmTipIcon "></span>溫馨提示：</div>
</div>
樣式如下：

.warmTipIcon {
  display: inline-block;
 width: 14px;
 height: 14px;
 background: url("../images/calculatorField.png") center/cover;
}
顯示效果:圖表和文字不在同一水平線上，此時可以用 vertical-align：-10% 進行精確的調整

.warmTipIcon {
  display: inline-block;
 width: 14px;
 height: 14px;
 background: url("../images/calculatorField.png") center/cover;
 vertical-align: -10%;
}
效果圖如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 input元素和display:inline-block的元素不在一行的解決辦法兩個DIV寬度和為100%，均為inline-block,卻不在一條水平線上 display:inline、block、inline-block的區別【原】display:inline-block下的IE元素 inline-block元素水平居中問題 display: inline、block、inline-block、flex和inline-flex display:inline-block，block，inline的區別與用法 HTML5 display:inline、block、inline-block的區別--備用 display:inline-block，block，inline的區別與用法一個例題：浮動引起元素變成行內塊元素-display:inline-block