我无法将跨度中的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;}
答案 0 :(得分:27)
我为你的http://jsfiddle.net/audetwebdesign/dCAkx/
设置了一个演示我简化了你的CSS并添加了一些背景颜色和填充。
您需要将vertical-align
属性应用于要对齐的所有内联元素。
vertical-align
属性未被继承,因此您需要将其应用于所有相关元素。
您可以应用填充和边距来控制文本和图像之间的间距。
您可以通过调整容器line-height
的{{1}}来尝试一下,并尝试其他对齐值,例如top,bottom,baseline。
这个技巧值得掌握,因为它触及了关于CSS盒子模型如何工作的关键概念,并且这种模式很常见,所以这是CSS工具箱中的一个很好的技巧。
答案 1 :(得分:0)
display:table-cell;
vertical-align:middle;
答案 2 :(得分:0)
这是一个简单的例子:
<强> Demo 强>
您可以根据需要轻松修改值。
我刚刚在图片和名为wrap
然后在CSS中添加了这个:
.wrap{
position:absolute;
top:50%;
height:240px; /* Make this whatever you want your height with */
margin-top:-120px; /* Negative half of the height */
}
答案 3 :(得分:0)
vertical-align: middle
不适用于display: block
的元素。如果可能,请display: inline
,如果不是,请display: table-cell
。
此外,http://mathiasbynens.be/demo/center-vertically-inside-float可能有所帮助。