How to make round circle links responsive in css? - css

Question

I have been struggling with this for quite some time now. Apparently using % width and height is not enough?
Right now I have fixed 100px width and height and border radius is half of it so it will make it look round. Line height is set to 100px so text would display vertically in the middle of those circles. I have no idea how to vertically center text in another way...
How do I make this menu responsive so it would become smaller as the screen size changes?
HTML:
<div id="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
CSS:
#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
display: block;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
border: 1px #a2a2a2 solid;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
text-align: center;
line-height: 100px;
margin: 5%;
}

Answer 1

If you want true 'responsiveness' you can use the vw units which are directly related to the viewport width.
Jsfiddle Demo
Support isn't bad: CanIUse.com
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: 1px #a2a2a2 solid;
text-transform: uppercase;
text-decoration: none;
font-size: 4vw;
text-align: center;
line-height: 15vw;
margin: 5%;
}
<div id="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>