再来一个未知高度图文混合垂直居中(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.html.cn/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;}??

查看:http://www.9demo.com/article/7.htm

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

评论 1

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

    FF不能垂直居中哦

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏