我无法让 span 中的 img 和文本垂直对齐:
<p class="login-button">
<input type="submit" id="login-submit" value="Log On" /><img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" />
<span id="error" style="color:red; padding-left:13px;">text </span>
</p>
有什么想法吗? 我试过:
.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}
最佳答案
我为您设置了一个演示:http://jsfiddle.net/audetwebdesign/dCAkx/
我稍微简化了您的 CSS 并添加了一些背景颜色和填充。
您需要将vertical-align
属性应用到所有您想要对齐的内联元素。
vertical-align
属性不是继承的,因此您需要将它应用到所有相关元素。
您可以应用填充和边距来控制文本和图像之间的间距。
您可以通过调整容器 p
的 line-height
进行一些试验,还可以尝试其他对齐值,例如顶部、底部、基线。
这个技巧值得掌握,因为它触及了 CSS 盒模型如何工作的关键概念,而且这种模式非常常见,因此在您的 CSS 工具箱中是一个很好的技巧。
关于html - 垂直对齐 img 和 <p> 内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5219324/