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

html – 垂直对齐img和文本内部,第1张

概述我不能让跨度中的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和文本内部所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1128557.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存