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

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -