在div+css制作网页中,经常会出现div或者li中文字底部或者顶部对齐无法居中的问题,设置了vertical-align=middle(垂直对齐)仍然无法实现。这是因为vertical-align适用于in-line和table-cell,对于div,li,p等块级元素是不生效的。原理是这个原理,使用中太多情况会需要垂直居中,其中解决办法很简单,下面针对常见的两种情况进行说明,以li为例,div相同。
1、li中仅有文字,图片无或作为背景
如:<ul><li class="vm">我需要居中</li><ul>
2、 li中插入图片img和文字,图片与文字无法居中对齐
如:<ul><li class="vm"><img src="/image/photo.jpg" />我和照片要居中对齐</li></ul>
这种情况可以对li中的img标签进行定义css样式设置垂直居中,即可解决:
.vm img{ vertical-align:middle;}