CODEWITHSUNDEEP
cssvertical-alignment
Eric Wood
Eric Wood

Reputation: 589

Vertical alignment / circle div

I'm building a site with some services icons, but having a hard time getting the image to stay vertically centred in the div. Right now, I'm using "margin" on the img to manually center it, but I'd like to find a more fluid solution.

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;
}

Here's a fiddle of what I have so far: http://jsfiddle.net/Lpzve/1/

Upvotes: 0

Views: 1155

Answers (2)

j08691
j08691

Reputation: 207901

How about positioning the image like this:

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

jsFiddle example

Upvotes: 2

Adrift
Adrift

Reputation: 59779

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

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

Upvotes: 0

Related Questions