Question

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

我无法使用固定宽度，因为我既不知道内容也不知道字体大小。我知道每个内容只会说几句。

出于类似的原因，我不能使用明确的比例宽度;我不知道内容的比例，例如中心可能很短，左侧或右侧大于页面宽度的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>

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

enter image description here

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

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

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

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

Answer 1

我不是100％肯定你在追求什么。这就是我所得到的：

你想要左边的div 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;
}

Answer 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在页脚中心，中间位于* body *

2 个答案: