图像垂直居中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图像垂直居中相关的知识,希望对你有一定的参考价值。
I can't remember if this code is updated for IE7, if it is then it should be working in at least IE6-7, Safari 2-3, Opera 8 and Firefox 2-3.Obviously the image_iefix is just for IE6.
/* Image Centering: Cross-Browser, vertical and horizontal image centering ----------------------------------------------------------------------------*/ /* Example markup: <div class="image"><div class="image_align"><img src="yourimage.jpg" alt=""></div></div> */ .image { overflow: hidden; position: relative; } .image[class] { display: table; position: static; } .image_align[class] { display: table-cell; position: static; vertical-align: middle; } .image img { margin: auto; } position: relative; top: -50%; } * html .image_align { position: absolute; top: 50%; }
以上是关于图像垂直居中的主要内容,如果未能解决你的问题,请参考以下文章