html - 使用 CSS 将 float 、无宽度的 div 居中

标签 html css

你可以在 http://jsfiddle.net/vW45s/ 看到我想要的内容。 。一个中心 div,有两行文本,左侧和右侧的文本与中心 div 底部的文本相邻。

我希望文本位于页面中央(主要的“hello world”或第二行)。现在我正在使用具有指定 widthmargin: auto 的外部 div。如果宽度太大,文字会显得不居中;如果宽度对于内部文本来说太小,则 div 将堆叠:http://jsfiddle.net/vW45s/1/ .

是否有更好的方法将这三个 float div 居中,同时仍然使左右文本与中心 div 的第二行对齐?

如有任何提示,我们将不胜感激。 CSS 不是我的强项,但我正在学习。

最佳答案

float 和居中不能很好地结合起来。为了能够将某些内容居中,浏览器必须能够确定元素的宽度。为了确定它的宽度,它需要知道其他 float div 的宽度。它们的宽度取决于您想要居中的元素的宽度。

您有以下选择:

  1. 尝试在不指定大小的情况下使其正常工作。也许有可能。准备好花一两天的时间来让它在 Firefox 和 Chrome 上运行,然后花一周的时间在 IE 中修复它。 ;)

  2. 为所有三个 div 分配宽度

  3. 使用绝对定位而不是 float 定位。将中心列设置为 100% 宽,并将侧列移到其前面(一个向左使用 left: 0,另一个使用 right: 0 向右;两者都需要确定宽度)。直到您开始将浏览器窗口的大小调整得太多(并且侧栏开始与中心重叠)为止,这种方法都有效。

  4. 使用tabledisplay: table-cell,因为表格单元格知道其同级单元格的宽度而无需 float 。这意味着您可以为两侧的列分配宽度,然后让内列增长。

PS:是的,我知道 table 不好的神话。这个神话是一种粗略的简化。如果您可以使用两个 div 和一些智能 CSS 获得相同的结果,那么嵌套 500 个表格来获得您想要的设计是很糟糕的。但这并不意味着您根本不能使用表格。

关于html - 使用 CSS 将 float 、无宽度的 div 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11095004/

相关文章:

css - Internet Explorer,突出显示文本时会更改字体和/或大小

html - 使用 bootstrap 在行内将 2 张图片彼此居中

javascript - 为什么在 Chrome 中使用 Panzoom 模糊 SVG 元素?

xhtml - 我应该使用 HTML5 语法吗?

javascript - fabricjs 对象按组排序

css - 带有负文本缩进的旋转绝对定位元素使页面非常长

css - 如何在 less 中定义变量

Javascript 从 url 中删除符号 "amp;"

javascript - 我想在我的 <ul> 菜单中添加一些动态菜单功能。

javascript - 如何将 CSS 仅应用于 jQuery 中的数字?