未知高度图文混合垂直居中,支持IE6+,FF,无css hack。
?
在CSS Play上面看到的的一个效果,这里主要是IE的问题。IE可以用这个方法垂直居中,这是见识了。
?
XML/HTML代码
- <div?class=“ver-center”>??
- ????<span?class=“edge”></span>??
- ????<span?class=“container”>??
- ????????<img?src=“https://www.7psus5.com/attachments/month_0805/b2008526221238.jpg”?alt=“”?/>??
- ????????<span?class=“bli”>妈妈对我说,这个无论你加了多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少多少个字,他都是居中的,很棒哦~</span>??
- ????</span>??
- </div>??
?
CSS代码
- body{?margin:0?;?padding:0;?background-color:#333333;?color:#FEFEFE;?font-size:12px;?line-height:150%} ??
- .ver{width😕740px;?background😕#292928;?border😕1px?solid?#6c6c6c;?margin😕30px?auto;} ??
- .ver-center?{?background😕#292928;?text-align😕center;?display😕table-cell;?vertical-align😕middle;?height😕400px;?width😕740px;} ??
- .ver-center?img?{?border😕2px?#ffffff?solid;?padding:2px;} ??
- .ver-center?.bli{?width😕500px;?text-align😕justify;?margin😕10px?auto;?display:block} ??
- .edge?{width:?0;?height:?100%;?display😕inline–block;?vertical-align😕middle;}? ??
- .container?{text-align😕center;?width:?100%;?display😕inline–block;?vertical-align😕middle;}??
?IE垂直居中主要是这两个样式:
CSS代码
- .edge?{width:?0;?height:?100%;?display😕inline–block;?vertical-align😕middle;}? ??
- .container?{text-align😕center;?width:?100%;?display😕inline–block;?vertical-align😕middle;}??
查看:
FF不能垂直居中哦