在实际的使用中,会遇到img上下居中的问题:
1.一般情况下,将其放置在table中:可以自动的上下居中。
2.另外一种情况<即一般情况下>
以li中为例子:在无序列表中 li元素下的img属性(vertical-align:middle),无法实现上下居中效果。
解决方法:
CSS样式
<style type="text/css"> li { width:500px; height:200px; border:#CCFF00 1px solid; vertical-align:middle; text-align:center; display:table-cell } span { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style>
HTML结构
<li><span></span><img src="momoe.jpg" width="79" height="39" /></li>
此方法是在li元素中增加一个span元素,通过设置span元素的样式,从而达到img元素居中的效果。
* 或者将span元素替换为一个img{height:100%;0;}也可以达到同样的效果。
两者之间的区别是,span元素(辅助元素)需要设置vertical-align:center样式,而img元素(辅助元素)不需要设置。
3. 一种较简便的方法:
将父级元素的line-height和height参数设置为相同大小,且img需要设置vertical-alilgn:middle;