0
我正在用一些服務圖標構建網站,但很難讓圖像在div中保持垂直居中。現在,我在img上使用「邊距」來手動居中,但我想找到更流暢的解決方案。垂直對齊/圓形div
HTML
<div class="box">
<a href="#" class="services"><img src="http://s24.postimg.org/3t7bg1qgh/Scissors.png"/></a>
</div>
CSS
.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
a.services{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align:center;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:20px solid #e5f2f7;
border-radius:100%;
text-align:center;
display:inline-block;
}
a.services:hover{
border:40px solid #7ed4f7;
}
a.services img{
margin:32% 0;
}
a.services:hover img{
margin:30% 0;
}
這裏是什麼,我至今小提琴:http://jsfiddle.net/Lpzve/1/
這並獲得成功!謝謝! –