how to center a character in a css3 div with rounded borders

Question

Hey I hope you can help me. I am trying to center a number in a css3-div. I am using this:

border:2px solid #333333;  
padding:1px;  
-moz-border-radius:10px;  
-webkit-border-radius:10px;  
-o-border-radius:10px;  
-khtml-border-radius:10px;  
border-radius:10px;  
background-color: #fff;  
height: 25px;  
width: 25px;

and it gives me this:

How do I center it also with a single-digit charachter?

many thanks!

Answer 1

Assuming that the element is also display: block; (or display: inline-block; ) you can just add:

text-align: center;
line-height: 25px; /* vertical height of the container/element */

to your CSS.