在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>
.vm{ height:20px; line-height:20px;} //只需要设置line-height和元素的height相同即可实现文字居中；
2、li中插入图片img和文字，图片与文字无法居中对齐
如：<ul><li class="vm"><img src="/image/photo.jpg" />我和照片要居中对齐</li></ul>
这种情况可以对li中的img标签进行定义css样式设置垂直居中，即可解决：
.vm img{ vertical-align:middle;}
过两天再整理一个float浮动乱七八糟的解决方法，还有ie6与其他浏览器的兼容性hack，算是备忘吧。
posted on 2012-11-12 22:24
wf 阅读(3426)
评论(0) 编辑 收藏 引用 所属分类:
Computer Tech.