網頁元素居中攻略記_(6)圖片水平垂直居中


前言

借助table的特性來實現


代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.test{
display:table;
height:800px;
width:800px;
background:#99cc99;
border-radius:5px;
border:1px solid #f70;

}

.test>span{
display:table-cell;
vertical-align:middle;
text-align:center;
}

.test>span>img{
height:400px;
width:400px;
border-radius:50%;
box-shadow:1px 1px 3px rgba(0,0,0,.5);
}

</style>
</head>
<body>
<div class="test">
<span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
</div>
</body>
</html>

效果圖

這里寫圖片描述


結語

用position來定位也可以…這里只是展示另一種圖片居中的方式,,感覺相當方便


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com