CSS Static Play Button - html

Question

I'm trying to make a play button. I've run in to some trouble trying to get the play triangle to center in the circle. I've been trying to figure this out with no avail so I thought I'd ask you guys and gals!
If you have any other suggestions on how to do this I would love to know!
Thanks guys!
HTML:
<a href="#">
Learn more
<br>
<i class="fa fa-angle-down"></i>
</a>
CSS:
#play-btn{
height: 100px;
width: 100px;
margin: 0 auto;
position: relative;
display: inline-block;
box-sizing: border-box;
border: 3px solid #FFF;
border-radius: 50%;
opacity: .7;
}
#play-btn:hover{
opacity: 1;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.fa-play{
position: relative;
top: 50%;
color: #FFF;
opacity: .7;
font-size: 50px;
transform: translateY(-50%);
}
.fa-play:hover{
color: #FFF;
opacity: 1;
}
http://codepen.io/anon/pen/grpzmr

Answer 1

Just apply the text-align:center; in the #play-btn to center its contents:
#play-btn {
height: 100px;
width: 100px;
margin: 0 auto;
position: relative;
display: inline-block;
box-sizing: border-box;
border: 3px solid #FFF;
border-radius: 50%;
opacity: .7;
text-align: center;
}
Your updated pen.

Answer 2

Actually You just need to make minor modification with your CSS.
Just add the below CSS for the class #play-btn, and your problem will be resolved.
text-align:center;
padding-left: 10px;
Or Check it out below updated code :
HTML :
<a href="#">
Learn more
<br>
<i class="fa fa-angle-down"></i>
</a>
CSS :
#play-btn{
height: 100px;
width: 100px;
margin: 0 auto;
position: relative;
display: inline-block;
box-sizing: border-box;
border: 3px solid #FFF;
border-radius: 50%;
opacity: .7;
text-align:center;
padding-left: 10px;
}
#play-btn:hover{
opacity: 1;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.fa-play{
position: relative;
top: 50%;
color: #FFF;
opacity: .7;
font-size: 50px;
transform: translateY(-50%);
}
.fa-play:hover{
color: #FFF;
opacity: 1;
}
Just copy and paste and check it out i hope this will help you.