Center link in a circle
Center link in a circle
HTML
<div class="container">
<a href="#" class="circle">+</a>
</div>
CSS
.container {
position:relative;
width:300px;
height:100px;
background-color:#999;
}
.circle {
position:absolute;
left:100px;
top:50px;
width:1.25em;/** 20px / 16px = 1.25em **/
line-height: 1.25;
border-radius:1.375em; /* Half of 44px is 22px :: 22px / 16px = 1.375em **/
background-color:#4d90fe;
color:#FFF;
box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
text-align:center;
}
.circle {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
}