再来一个未知高度图文混合垂直居中(9demo发布)

未知高度图文混合垂直居中,支持IE6+,FF,无css hack。
?

CSS Play上面看到的的一个效果,这里主要是IE的问题。IE可以用这个方法垂直居中,这是见识了。

?

XML/HTML代码
  1. <div?class=“ver-center”>??
  2. ????<span?class=“edge”></span>??
  3. ????<span?class=“container”>??
  4. ????????<img?src=“https://www.7psus5.com/attachments/month_0805/b2008526221238.jpg”?alt=“”?/>??
  5. ????????<span?class=“bli”>妈妈对我说,这个无论你加了多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少个字,他都是居中的,很棒哦~</span>??
  6. ????</span>??
  7. </div>??

?

CSS代码
  1. body{?margin:0?;?padding:0;?background-color:#333333;?color:#FEFEFE;?font-size:12px;?line-height:150%} ??
  2. .ver{width😕740px;?background😕#292928;?border😕1px?solid?#6c6c6c;?margin😕30px?auto;} ??
  3. .ver-center?{?background😕#292928;?text-align😕center;?display😕table-cell;?vertical-align😕middle;?height😕400px;?width😕740px;} ??
  4. .ver-center?img?{?border😕2px?#ffffff?solid;?padding:2px;} ??
  5. .ver-center?.bli{?width😕500px;?text-align😕justify;?margin😕10px?auto;?display:block} ??
  6. .edge?{width:?0;?height:?100%;?display😕inlineblock;?vertical-align😕middle;}? ??
  7. .container?{text-align😕center;?width:?100%;?display😕inlineblock;?vertical-align😕middle;}??

?IE垂直居中主要是这两个样式:

CSS代码
  1. .edge?{width:?0;?height:?100%;?display😕inlineblock;?vertical-align😕middle;}? ??
  2. .container?{text-align😕center;?width:?100%;?display😕inlineblock;?vertical-align😕middle;}??

查看:

赞(0) 打赏
未经允许不得转载:WEBTian开发 » 再来一个未知高度图文混合垂直居中(9demo发布)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    FF不能垂直居中哦

    丁丁7年前 (2011-10-20)回复

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏