页脚中的左/右/中心 div，中心位于 *body* 中间答案

【问题标题】：Left/right/center divs in footer with center in middle of *body*页脚中的左/右/中心 div，中心位于 *body* 中间
【发布时间】：2014-07-06 08:00:42
【问题描述】：

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

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

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

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

我不在乎内容重叠时会发生什么；它们既可以重叠，也可以自动换行，或者做其他丑陋的事情。

目前我得到的最接近的是这个 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>

但我看到了这个（一个极端的例子）：

这是一个小提琴：http://jsfiddle.net/HCduT/

我尝试了 float、display、overflow 和 margin 的各种组合，但我似乎无法做到这一点。

编辑：我也尝试过 http://jsfiddle.net/nshMj/，这是其他人推荐的，但也有同样的问题（缺点是我不太了解它的作用）。

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

【问题讨论】：

你的意思是这样的jsfiddle.net/HCduT/3？
@Alek 谢谢。这种方法有效，但如果右侧的内容大于页面宽度的 1/3（它可以是短的中心内容），则会换行。当我从右边删除分词时，它又回到了原来的问题。

标签： html css

【解决方案1】：

我不是 100% 确定你在追求什么。这是我得到的：

你希望左边的 div 在左边
你想要右边的 div
您不想将它们的宽度限制为 33%；
您希望中心始终处于死点。
您不关心重叠的内容

如果我猜对了，那么试试这个：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;
}

【讨论】：

哇，对不起，我都把这个项目搁置了一段时间，直到现在才注意到这个答案。这正是我一直在寻找的，并且很有意义。再次感谢！

【解决方案2】：

经过一番研究，我以这个结尾：

html

<body>
    <div id="content">center point V center point</div>
    <div id="container">
        <div id="left">L</div>
        <div id="center">C</div>
        <div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>       
        <br style="clear: left;" />
    </div>
</body>

css

#content {
    text-align:center;
}
#left {
    width:33%;
    float:left;
}
#right {
    width:33%;
    float:left;
    overflow:hidden !important;
}
#center {
    float:left;
    width:33%;
    text-align:center;
}

#container{
    width:100%;
}

fiddle

【讨论】：

谢谢。这也几乎可以工作，除非它会在 div 中的文本大于主体宽度的 1/3 时对其进行剪辑。我可以在左侧和中心设置overflow:visible 以使这些工作，但它在右侧不起作用，因为文本仍然与右侧 div 的左边缘对齐（即使我还添加了text-align:right）并且只是跑出屏幕。我不明白的是为什么即使中心div是全宽的，左右也会影响中心的文本位置（如添加border所示）；如果我可以阻止左/右影响可以工作的中心布局。
如果您将overflow: scroll; 设置为#right 元素？
Then it adds a scroll bar when the content is larger than 1/3.
仍将右侧限制为宽度和剪辑的 1/3。这非常困难......