1

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

1 Answer 1

5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.