在<p>中垂直对齐img和文本

Question

我不能让跨度中的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-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;}

Answer 1

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

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

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

该vertical-align属性不是继承的,因此您需要将其应用于所有相关元素.

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

您可以通过调整line-height容器来p尝试一下,并尝试其他对齐值,例如top,bottom,baseline.

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