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