在< p>内垂直对齐img和文字 [英] Vertical align img and text inside <p>

问题描述

我无法使跨度中的img和文本垂直对齐：

I can't get the img and text in the span to be vertically aligned:

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

任何想法？
我试过：

Any ideas? I tried:

.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}

推荐答案

我为您设置了一个演示： http://jsfiddle.net/audetwebdesign / dCAkx /

I set up a demo for your at: http://jsfiddle.net/audetwebdesign/dCAkx/

我简化了你的CSS一点点，并添加了一些背景颜色和填充。

I simplified your CSS a tiny bit and added some background color and padding.

您需要将 vertical-align 属性应用于您要对齐的所有内联元素。

You need to apply the vertical-align property to all the inline elements that you want to align.

vertical-align 属性未继承，因此您需要将其应用于所有相关元素。

The vertical-align property is not inherited, so you need to apply it to all the relevant elements.

可以应用填充和边距来控制文本和图像之间的间距。

You can apply padding and margins to control the spacing between the text and the image.

您可以通过调整 line-height p ，并尝试其他对齐值，如top，bottom，baseline。

You can experiment a bit by adjusting the line-height of the container p and also, try out other alignment values such as top, bottom, baseline.

这个技巧是值得掌握的，因为它涉及到一个关于CSS盒子模型如何工作的关键概念，这种模式是非常常见的，所以在你的CSS工具箱中有一个好的技巧。

This trick is worth mastering because it touches on a key concept of how the CSS box model works, and this pattern is very common, so a good trick to have in your CSS toolbox.

这篇关于在< p>内垂直对齐img和文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！