positioning text in a circle using css

Question

I have this code :

<div class="likearea">
    <a href="#">like to enter</a>
</div>

and this is my style sheet :

.likearea{
    width:200px;
    height:200px;
    float:right;
    background-color:#00653b;
    border-radius:200px;
    float:right;
    margin-right:10%;
    margin-top:5%;
}
.likearea a{
    color:#FFF;
    font-size:44px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    line-height:50px;
    margin-top:5%;
}

I need the text to be positioned in the center but it is not working.I want "like" to be by it self same to "to" and "enter" any help please????

Answer 1

.likearea{
margin: 10px auto;
overflow: hidden;
width: 286px;

}

.likearea a{display: block;}

Answer 2

HTML

<div class="likearea">
    <a href="#">like to enter</a>
</div>

CSS

 .likearea{
    width:200px;
    height:200px;
    float:right;
    background-color:#00653b;
    border-radius:200px;
    text-align: center;
    float:right;
    margin-right:10%;
    margin-top:5%;
}
.likearea a{
    color:#FFF;
    font-size:20px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    vertical-align: middle;
    line-height: 200px; /* the same as your div height */
}

Answer 3

You can use display: flex; align-self: center; for vertical centering.

For horizontal centering, you can use margin-left/right: auto

.likearea{
    width: 200px;
    height: 200px;
    float: right;
    background-color: #00653B;
    border-radius: 200px;
    float: right;
    margin-right: 10%;
    margin-top: 5%; 
    box-sizing: border-box;
    text-align: center;
    display: flex;
}
.likearea a {
    color: #FFF;
    font-size: 44px;
    /* text-align: center; */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 150px;   
    align-self: center;
}

Answer 4

you need to set display for ".likearea" as table and text-align as center then for ".likearea a" you need to set display as table-cell and vertical-align as middle;

Following code is working

 .likearea{
width:200px;
height:200px;
float:right;
background-color:#00653b;
border-radius:200px;
float:right;
margin-right:10%;
margin-top:5%;
text-align:center;
display: table;

}

.likearea a{
    color:#FFF;
    font-size:44px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    line-height:50px;
    margin-top:5%;
    display:table-cell;
    vertical-align: middle;
}