CODEWITHSUNDEEP
htmlcss
dave dan
dave dan

Reputation: 1

positioning text in a circle using css

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????

Upvotes: 0

Views: 133

Answers (4)

Rahul Joshi
Rahul Joshi

Reputation: 193

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

Upvotes: 0

Hasan Zahran
Hasan Zahran

Reputation: 1452

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

}

.likearea a{display: block;}

Upvotes: 1

Tamura
Tamura

Reputation: 1798

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

Upvotes: 0

gandil
gandil

Reputation: 5418

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 */
}

Upvotes: 0

Related Questions