html – 垂直对齐img和文本内部

概述我不能让跨度中的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-lo 我不能让跨度中的img和文本垂直对齐：

<p >                    <input type="submit" ID="login-submit" value="Log On" /><img  ID="loadingdiv" src="/Content/ib/images/AJAX-loader.gif" />                    <span ID="error" >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的行高来尝试一下,并尝试其他对齐值,如top,bottom,baseline.

这个技巧值得掌握,因为它触及了关于CSS盒子模型如何工作的关键概念,并且这种模式很常见,所以这是CSS工具箱中的一个很好的技巧.

总结

以上是内存溢出为你收集整理的html – 垂直对齐img和文本内部全部内容，希望文章能够帮你解决html – 垂直对齐img和文本内部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。