posts - 84,  comments - 264,  trackbacks - 0

在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 阅读(3349) 评论(0)  编辑 收藏 引用 所属分类: Computer Tech.
只有注册用户登录后才能发表评论。
<2012年11月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

        欢迎来到我的BLOG~~~

        之前存放FLASH和音乐的地方down掉了,随便链个歌先听听吧~~~
免费的东西真不保险啊~~

听到首英文歌,挺好听的,放上来。。God is a girl。。far away from home

换了新歌All Out of Love

经推荐换个the power of dream~

换个歌I believe in love

今晚,我感觉离你很近---又换歌了

That place in your heart~~

I'm all about you~08317

always and forever~

Acros the universe

常用链接

留言簿(14)

随笔分类

随笔档案

文章分类

文章档案

相册

friend

study

  • Jacky26℃
  • 很全的计算机水平考试资料
  • topboyleo
  • a lot of English stuff like Action English......

最新评论

阅读排行榜

评论排行榜