CODEWITHSUNDEEP
css
Frozen
Frozen

Reputation: 97

how can i center the text inside my css div circle

This is my css

.circle{
 border-radius:50%;
 border:5px solid black;
 width:100px;
 height:100px;
 box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
 font-family:Century Gothic;
 color:black;
 text-align:center;

 }

.circle:hover{
background-image:url(../images/stardust.png) ; 
 color:#FCB326;
 border:5px solid #56a7ba;
}

How can make the text center of circle ? I have try my best to center it but still fail. enter image description here

Upvotes: 1

Views: 154

Answers (1)

JunM
JunM

Reputation: 7160

Use display: table-cell; + vertical-align: middle;

Fiddle

.circle {
    border-radius:50%;
    border:5px solid black;
    width:100px;
    height:100px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
    font-family:Century Gothic;
    color:black;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 5

Related Questions