您的位置:建站学院首页 >> 文章 >> 网页设计 >> CSS
CSS图片垂直居中方法整理集合

看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
 width:500px;
 height:500px;
 border:1px solid #ccc;
 overflow:hidden;
 position:relative;
 display:table-cell;
 text-align:center;
 vertical-align:middle;
 }
div p {
 position:absolute;
 top:50%;
 }
img {
 position:relative;
 top:-50%;left:-50%;
 width:276px;
 height:110px;
 }
div>p,p>img {
 position:static;
 }
</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

本内容共5页  首 页  上一页  下一页  尾 页  当前在第1

Google
 
Web www.cqxw.net