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

问题描述

我无法让 span 中的 img 和 text 垂直对齐:

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.

您可以通过调整容器 p 的 line-height 进行一些实验，也可以尝试其他对齐值，例如顶部、底部、基线.

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