How to center link in middle of box

Hi all,

Using this layout how can I position the Read More link in the center of the circle?


<p class="more">
    <a href="#">READ MORE</a>
</p>


.more{               
        width: 100%;
        text-align: center;        
        margin: 0;
        padding: 0;
     }

     .more a{
         background: red;
         display: block;
         width: 120px;
         height: 120px;
         margin: 0 auto;      
         color: #fff;
         text-decoration: none;
        -moz-border-radius: 120px;
        -webkit-border-radius: 120px;
      }

Give .more (or .more a) a line-height value matching the height of the circle.

.more {               
   width: 100%;
   text-align: center;        
   margin: 0;
   padding: 0;
   line-height: 120px;
}

.more{
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}

 .more a{
     background: red;
     [b]display: block;[/b]

Just so you know, if .more is always going to have a display: block element inside it, you might as well remove the text-align: center on it.
Similarly, since the anchor is now a block, it’s considered a sort of block parent around the anonymous-inline-boxes around the text inside. So text-align: center would be necessary on the anchor now, because it’s a block (for horizontal centering) if your text is way smaller than the 120px width.

Victorinox’ answer works for vertical centering unless the text gets long enough to wrap (there’ll be too much vertical space then). Should that be the case, you could change the height to 80px and add in the rest of the height with top-padding (since padding adds to dimensions). I’ve done both techniques regularly since sometimes text length just isn’t known.