html - How to center my text vertically in a circular div with css -
i wondering neglecting in css, preventing text being centered vertically? below current code, and here fiddle.
here html
<div class="donatebutton"><a href="#">donate</a></div>
this css
.donatebutton { width:100px; height:100px; background-color:#fe6d4c; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin:0 auto 30px; text-align:center; } .donatebutton:hover { background-color:#09c; } .donatebutton { display:block; width:100%; color:#ffffff; font-size:1em; text-decoration:none; padding-top:50%; line-height:1em; margin-top:0.5em; }
thanks in advance insight.
i want make responsive eventually, guess question :)
if you're sure text 1 line can this:
.donatebutton { display:block; width:100%; color:#ffffff; font-size:1em; text-decoration:none; line-height:100px; }