在父div的水平中心的位置文本

Question

我想制作一个包含两个按钮和一个“logo”的标题。这两个按钮应该相对于浏览器左右浮动，并且“logo”应该位于绝对水平中心，也是相对于浏览器。

这一切都运行良好，直到我意识到徽标位于两个按钮之间的中心位置，这两个按钮的大小不同，使其偏离中心。

这里是我的代码：Clicky

我尝试了一些绝对定位，但什么也没做，可能是因为我的一部分无知。

#head { 
    position: absolute; 
    left: 50%; 
} 

Answer 1

看起来你试图用“的text-align：中心'在父容器上进行这项工作。它正在工作，除了它将所有这三个要素集中在一起。你可以在这里看到，如果你删除了漂浮物：http://jsfiddle.net/aHP6D/1/。

所以，一个选择是绝对定位按钮，从而使它们脱离正常的文档流程。这意味着剩下的（而不是绝对定位的）唯一的<span>就是你想要的中心。

你可以看到，在这里工作：

http://jsfiddle.net/aHP6D/2/

Answer 2

为中心的东西，只是边距设置为自动：

#head{ 
    position:relative; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 

完全居中：

​​

Answer 3

设置#head的position到absolute和left财产50%将围绕它的左侧。将其margin-left属性设置为负半宽将拉回中心。

#head { 
    position: absolute; 
    left: 50%; 
    width: 100px; 
    margin-left: -50px; 
} 

查看http://jsfiddle.net/exs78/举例。