Question

我正在构建一个带有一些服务图标的网站，但很难让图像垂直居中于div。现在，我在img上使用“margin”来手动居中，但我想找到一个更流畅的解决方案。

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/

Answer 1

如何定位图像：

a.services img {
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

<强> jsFiddle example

Answer 2

a.services img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
}

http://jsfiddle.net/Lpzve/2/

垂直对齐/圆形div

2 个答案: