相关疑难解决方法(0)

如何水平居中可变宽度的浮动元素？

编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .

我需要在div中居中一个左对齐文本块,但我需要将文本块的视觉宽度放在居中而不是块本身.

在许多情况下,这可能是相同的,但想想一个div相当狭窄的情况(想想移动宽度)和文本太长而无法放在一条线上,所以它需要溢出.

在下面的示例中,我将文本块显示为浅蓝色来说明,但实际上它们将与父div(白色)颜色相同.在使用的任何文本中也没有换行符.

在1a中,文本只有一行,并且小于文本块的最大宽度,因此我可以将文本块设置为文本的宽度,并且没有问题.

但是,在2a中,文本比最大宽度长,因此包裹到下一行.这样做的结果是可见文本块不再出现居中.

如何仅使用HTML和CSS 将这两种情况显示为1b和2b？

编辑1:似乎每个人都在告诉我如何实现1a和2a中的情况,但我已经有了.我想实现1b和2b的情况.

编辑2:我使用的代码与David在其链接中提供的代码基本相同(http://jsfiddle.net/davidThomas/28aef/).对文本区域使用颜色只是为了说明这一点.如果将其更改为白色(http://jsfiddle.net/28aef/2/),您可以看到文本块不再看起来居中(即左右边距不相等)

这是一个关于跨浏览器兼容性的相当普遍的问题.

在设计的各个方面,我目前正致力于实现我想要的布局和样式(不使用图像)的唯一方法是使用display:inline-blockcss样式选项.但是,IE8和其他旧浏览器不支持这种情况,这导致我的设计失败.

因此,我的问题1有两个部分 - 是否有一种方法可以实现IE8的类似或等效效果？2 - 如果没有,我如何才能使设计顺利降级？

供您参考,这是一个在我的设计中使用它的例子.

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

它是一个20x20像素的颜色块,用于解释图表中的颜色.

更普遍的是,每当我想要在文本体内对文本的特定位等进行更大的格式化和布局控制时,就会出现这个问题.

在我正在进行的设计中,我将不再支持旧的浏览器类型,因为它严重依赖于canvas元素.但是,我认为这是一个很好的问题,因为我之前已经多次遇到过这个问题.

谢谢