CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Better way of centering icon within CSS circle

I have a symbol inside a circle div.

http://jsfiddle.net/uqbujck3/

Is this the best way of doing this? I've heard it may be unreliable.

.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid #1588cb;
    color: #1588cb;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    text-decoration:none;
}
<div>
    <a href="#" class="circle">A</a>
</div>

Upvotes: 0

Views: 626

Answers (1)

P. Frank
P. Frank

Reputation: 5745

Is the same with a div text-align but you can use transform for perfect align. Please try:

$(document).ready(function() {
	$(".circle").animate({
		width:'200px',
		height:'200px'
	},2000)
})
.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-size: 18px;
    font-weight: 300;
    position:relative;

}
.a-text{
    position: absolute;
    text-decoration:none;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
    <a href="#" class="a-text">A</a>
</div>

Upvotes: 1

Related Questions