如何在带有链接的浮动div之间将div居中，同时仍然访问这些链接？

Question

我有一个标题div，在页面顶部的固定位置。

在它里面有一些向左浮动的div和一些向右浮动的div，都有链接。我有另一个div，我希望它在页面上居中，垂直放置在它们之间。

图表：

DivA  DivB         PageCenteredDiv     DivC DivD DivE

我让页面居中的div工作得很好：

width:      100%;
text-align: center;
position:   fixed;
top:        0;
left:       0;

但是，无论我如何处理任何div上的z-index，浮动div中的链接都位于居中div的下方，无法单击。

有没有办法让那些浮动的div高于另一个div？

任何帮助都将不胜感激！

Answer 1

如果您可以在居中的div上设置宽度：

left: 50%;
margin-left: -150px;
position: absolute;
text-align: center;
top: 0;
width: 300px;

这将使300px-wide div居中于头部内部，同时防止其重叠到两侧的浮动div上。你显然可以根据内容来选择宽度。

编辑：我在JSFiddle上制作了一个快速演示，这样你就可以看到它是如何工作的：http://jsfiddle.net/MartinodF/2gXKP/