Html 页脚中的左/右/中心div，中心位于*正文的中间*_Html_Css

Html 页脚中的左/右/中心div，中心位于*正文的中间*

html css

Html 页脚中的左/右/中心div，中心位于*正文的中间*,html,css,Html,Css,我正在尝试创建一个页脚，在页面的左侧、右侧和中央都有一些文本。我一直在遵循这些示例，但所有这些示例都有相同的问题：中间div中的内容位于左侧和右侧div边界之间的中心，而不是主体上的中心。也就是说，如果左/右宽度不同，则中心偏离中心我不能使用固定宽度，因为我既不知道内容也不知道字体大小。我知道内容将只是几个字每个出于类似的原因，我也不能使用显式比例宽度；我不知道内容的比例，例如，中心可能较短，左侧或右侧大于页面宽度的1/3 我实际上不需要使用div，我只是因为这似乎就是这样做的。。。但是，任

我正在尝试创建一个页脚，在页面的左侧、右侧和中央都有一些文本。我一直在遵循这些示例，但所有这些示例都有相同的问题：中间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>


...
...
...

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

这是一把小提琴：

我尝试了

浮动

、

显示

、

溢出

、和

边距

的各种组合，但我似乎没有做到这一点

编辑：我也尝试过，其他人推荐过，但它也有同样的问题（缺点是我不太了解它的功能）

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

经过一些研究，我以以下内容结束：

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>

我不能100%确定你想要什么。以下是我得到的：

你想要左边的div吗

你想要右边的那个div吗

你不想把宽度限制在33%

你希望中心永远是死中心

你不在乎重叠的内容

如果我没弄错，那就试试这个：

CSS：（颜色刚好可以区分内容，因为内容重叠）

“你是说这样的事吗？”亚历克，谢谢。这样做是可行的，但如果右侧的内容大于页面宽度的1/3（可以是短中心内容），则线条会将其包裹起来。当我从右边删除break这个词时，它又回到了原来的问题。谢谢。这也几乎起作用，但如果div大于正文宽度的1/3，则会剪裁div中的文本。我可以在左侧和中间设置

溢出：可见

，使其正常工作，但在右侧不起作用，因为文本仍与右侧div的左边缘对齐（即使我也添加了

文本对齐：右侧

），只是在屏幕外运行。我不明白的是，为什么即使中间div是全宽的，左侧和右侧也会影响中心的文本位置（通过添加

边框

可以证明这一点）；如果我可以阻止左/右键影响中心的布局，则可以使用。如果设置

溢出：滚动到#right元素？仍然将右侧限制为宽度和剪辑的1/3。这太难了…哇，我很抱歉，我都把这个项目搁置了一段时间，直到现在才注意到这个答案。这正是我想要的，而且很有意义。再次感谢！
#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%;
}

#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;
}