将文本放在父div的水平中心

Question

我正在尝试制作一个包含两个按钮和一个“徽标”的标题。两个按钮应相对于浏览器左右浮动，“徽标”应位于绝对水平中心，再次相对于浏览器。

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

这是我的代码：Clicky

我尝试了一些绝对定位，但它没有做任何事，可能是因为我的无知。

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

Answer 1

要居中，只需将边距设置为自动：

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

完全居中：

#head{
  position:relative:
  margin:auto;
}

Answer 2

看起来您尝试在父容器上使用'text-align：center'来实现此功能。它正在发挥作用，只是它将所有这三个元素作为一个整体。如果删除浮动，可以在此处看到：http://jsfiddle.net/aHP6D/1/。

因此，一个选项是绝对定位按钮，从而使它们脱离正常的文档流程。这意味着唯一的<span>是你想要居中的（而不是绝对定位的）。

你可以看到在这里工作：

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

Answer 3

将#head的{​​{1}}设置为position，将absolute设置为left，将其左侧居中。将其50%属性设置为负宽度的一半会将其拉回中心。

margin-left

有关示例，请参阅http://jsfiddle.net/exs78/。