Question

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

我尝试将方框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;
}

小提琴：

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

中心对齐两个div不起作用？

1 个答案: