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的{{1}}来尝试一下，并尝试其他对齐值，例如top，bottom，baseline。

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

Answer 2

display:table-cell;
vertical-align:middle;

Answer 3

这是一个简单的例子：

<强> Demo

您可以根据需要轻松修改值。

我刚刚在图片和名为wrap

的范围内添加了一个包装div

然后在CSS中添加了这个：

.wrap{ 
    position:absolute; 
    top:50%; 
    height:240px; /* Make this whatever you want your height with */
    margin-top:-120px; /* Negative half of the height */
}

Answer 4

vertical-align: middle不适用于display: block的元素。如果可能，请display: inline，如果不是，请display: table-cell。

此外，http://mathiasbynens.be/demo/center-vertically-inside-float可能有所帮助。

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

4 个答案: