html - 页脚中的左/右/中心 div，中心位于 *body* 中间

Question

我正在尝试创建一个页脚，其中一些文本位于左侧、右侧并在页面上居中。我一直在关注示例 such as this我对所有这些都遇到了同样的问题:中心 div 中的内容在左右 div 的边界之间居中，不以正文为中心。也就是说，如果左/右宽度不同，则中心偏离中心。

我不能使用固定宽度，因为我既不知道内容也不知道字体大小。我知道每个内容都只有几个字。

出于类似的原因，我也不能使用明确的比例宽度；我不知道内容的比例，例如中心可能较短，左侧或右侧大于页面宽度的 1/3。

我实际上没有使用div，我只是因为这似乎是这样做的方式......但是任何能让我左+ body 居中+右对齐的东西页脚样式的布局将起作用(只要它适用于所有常见的浏览器)。

我不在乎内容重叠时会发生什么；它们要么重叠，要么自动换行，要么做一些其他丑陋的事情。

目前我得到的最接近的是这个 CSS:

#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }

还有这个 HTML:

<div id="container">
    <div id="left">...</div>
    <div id="right">...</div>
    <div id="center">...</div>
</div>

但我看到了这个(一个极端的例子):

这是一个 fiddle :http://jsfiddle.net/HCduT/

我已经尝试了 float、display、overflow 和 margin 的各种组合，但我可以' 似乎做对了。

编辑:我也试过 http://jsfiddle.net/nshMj/ ，由其他人推荐，但它有同样的问题(缺点是我不太明白它的作用)。

如何使中心 div 中的内容与页面对齐，而不是在左右 div(具有不同大小)之间居中？

Answer 1

我不是 100% 确定您在寻找什么。这是我得到的:

1. 你想要左边的div
2. 你想要右边的 div
3. 您不想将这些宽度限制为 33%；
4. 您希望中心始终处于死点。
5. 你不关心重叠的内容

如果我做对了，那就试试这个: DEMO

CSS:(颜色只是为了区分重叠的内容)

#content {
    text-align:center;
}
#container {
    position: relative;
}
#left {
    float:left;
}
#right {
    float:right;
    color: #ccc;
}
#center {
    text-align:center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: red;
}