4

我不知道也不可能知道我需要居中的绝对 div 的宽度。它必须绝对定位，因为它与其他元素重叠（z-index 诡计）。这是我的基本结构

<div style='position:relative'>
    <div></div>
    <div style='position:absolute'>...</div>
</div>

第一个子 div 没有绝对定位，以便将其高度和宽度借给父级。第二个 div 必须与其兄弟重叠并水平居中。

上面的结构只是说明了我的困境，实际上父 div 会有很多孩子，并不是所有的孩子都是 div，它们的尺寸都不知道。

谢谢，我要睡觉了。。。

4

3 回答 3

2

好吧，我认为仅使用 CSS 是不可能的，因为要使绝对 div 居中，您总是需要设置宽度才能使用 -> "left: 50%; margin-left: [width/2 ]px;"。

无论如何，您可以使用一些 javascript/jQuery 代码来获取 div 的宽度，然后动态设置 CSS 宽度属性。

请阅读以下内容： http : //api.jquery.com/width/ http://api.jquery.com/css/#css2

于 2010-07-01T13:24:43.253 回答
0

这样做的方法将包括少量的js，虽然不多。虽然首先我会通过css：

首先你需要添加：

left: 50%;

这会将左侧 div 的末尾带到页面的一半。然后给它一个类，以便我们可以在 javascript 中引用它，例如：

<div style='position:relative'>
    <div class='center-absolute'>Content</div>
</div>

这样我们就可以在css和js中引用了。我们使用一个类，因为您应该只对一个元素使用一个 id。

这是您需要的CSS .center-absolute：

.center-absolute {
    position: absolute;
    left: 50%;
}

然后是js。由于可能有多个元素，我们需要一个 for 循环在每个元素之间进行迭代：

var $centerAbsolute = document.getElementsByClassName('center-absolute');
for (i = 0; i < $centerAbsolute.length; i++) {
    $centerAbsolute[i].style.marginLeft = $centerAbsolute[i].offsetWidth / 2 * -1 + 'px';
}

这将遍历所有具有 class of 的元素，center-absolute并为它们提供一个左边距，该边距为以它为中心的元素宽度的负一半。

这是一个工作小提琴演示：

http://jsfiddle.net/Hive7/FqJ7T/

于 2013-10-08T17:38:00.053 回答
-1

虽然这已被弃用，<div align="center">但应该可以工作。

于 2010-07-01T07:49:30.397 回答