如何对齐文本和图像垂直中div
问题描述:
如何对齐文本和图像垂直对齐中间?如何对齐文本和图像垂直中div
的jsfiddle演示在这里:http://jsfiddle.net/j3wDP/
我的CSS:
.rating{
border: 1px solid red;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
我的HTML:
<body>
<div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>
</body
答
改变你的CSS这样
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
line-height:20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
vertical-align:middle;
}
答
Demo
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
line-height:50px;
height: 50px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
您可以使用line-height
答
最好的方法是使用LINE-HEIGHT或者我们可以使用
.rating{ display:table-cell; vertical-align:middle; }
答
有不同的解决方案。您可以将您的内容包装到两个(例如div-)容器中,并像桌子一样处理它们。类似的东西:
<div style="display:table; height: 200px; background:red;">
<div style="display:table-cell; height:200px; vertical-align:middle">
<span>Your Content</span>
</div>
</div>
重要的是给他们一个高度属性和使用display:table和display:table-cell而不是它。另一种方式是用位置居中这个跨度:绝对:
<div style="height:200px; background:red; position:relative">
<span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>
在那个例子中的边距值由高度的一半值来计算(:= 20像素的margin-top:高度-10px)。但我更喜欢第一种方式。
:P:P不知道为什么我没有想过这个:)反正谢谢 – 2012-02-23 08:21:00