Vertically and horizontally aligned elements while floating left and right - html

Question

I want to center four links in a div.
This is what I did so far: jsfiddle
Html:
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
Css:
#menu {
width: 200px;
height: 200px;
border: 1px solid #000;
background: #eee;
position: relative;
padding: 10px;
}
#menu>section {
position: absolute;
text-align: center;
width: 200px;
}
#menu a {
display: block;
vertical-align: middle;
height: 20px;
}
#menu .left {
float: left;
height: 160px;
}
#menu .right {
float: right;
}
#menu .bottom {
clear: both;
}
The problem is that the floated elements do not vertically centered as they should. I want the left and right elements to be in the middle and not at the top.

Answer 1

May be you can use line-height property for this. Like this:
#menu .left, #menu .right {
height: 160px;
line-height:160px;
}
http://jsfiddle.net/YdPzP/13/

Answer 2

try adding
.left, .right { line-height: 160px; }

Answer 3

Since you are already using html5, I would say aside tag would probably come in handy in your case:
here is a Sample
DEMO

Answer 4

You can use padding for vertically aligning the links
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<div class="middle">
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
</div>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
add the below css:
#menu div.middle{
height:90px;
padding-top:60px;
}

Answer 5

I ran into a seeming conflict between float:left; and vertical-align: middle;
In my case, I wanted several small images to line up horizontally. Some of them were the right size vertically and the others weren't tall enough, so i wanted to line up just those vertically that were the wrong vertical size.
Using a <ul>/<li> structure, I kept float:left; and dispay:inline; and it was ok in FF and IE 7,8,9, but not correct in Chrome and Safari. For some reason, the last image went to the next line even though there was ample room for it.
After eliminating completely float: left; the vertical-align: middle; then worked. Then it was just adding padding to line them up horizontally. Works now in all browsers.
Not sure why there is a conflict between float:left; and vertical-align:middle;
You may want to play with eliminating your float:left;