我无法使跨度中的图像和文本垂直对齐：
<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属性到要对齐的所有内联元素。
The vertical-align属性不是继承的，因此您需要将其应用于所有相关元素。
您可以应用内边距和边距来控制文本和图像之间的间距。
您可以通过调整来尝试一下line-height容器的p另外，尝试其他对齐值，例如顶部、底部、基线。
这个技巧值得掌握，因为它涉及 CSS 盒模型如何工作的关键概念，而且这种模式很常见，因此是 CSS 工具箱中的一个好技巧。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
