css - 居中对齐两个 div 行不通？

Question

为什么两个盒子都在右边，而不是居中对齐？

fiddle :http://jsfiddle.net/gh76q/1/

我尝试将方框 2 的位置更改为相对位置，它可以解决问题，但当鼠标悬停在方框 1 上时方框会移动。

HTML:
<div align="center" id="top-link">
<div class="switch">
<div class="avg_display"><a href="/radgivning">Box 1</a></div>
<div class="avg_hide">Box1 info<br></div></div>
<a href="/uthyrning-a-o"><div class="link-block">Box2</div></a>
</div>

CSS:
#top-link {padding-bottom:40px;}
.switch {display:inline-block;}
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
position:absolute;
color:#555;

}

.link-block a {
text-align: center;
vertical-align: middle;
line-height: 25px; 
color:#555;
}

.link-block:hover {
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
margin-top:10px;
margin-right:20px;
}

.link-block:hover a{
color:#fff;

}

.avg_display {
display:inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_hide {
display:none;
padding: 20px 20px 20px 20px;
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
border-radius: 5px;
height:250px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}

.avg_display a {
text-align: center;
vertical-align: middle;
line-height: 25px; 
color:#555;
}

fiddle :

Answer 1

从 box2 类中删除 position:absolute。

.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
/*position:absolute;*/
vertical-align:top; /* Keep the box always on top */
color:#555; 
}

DEMO