Question

我想将div放在父div中。我能做到的唯一方法是使用margin-left属性。公式是：

margin-left = (parent.width/2) - (child.width/2)

但我无法通过JavaScript完成它，因为有两件事：

宽度未在样式中定义，因此无法通过document.getElementById("child").style.width
document.getElementById("child").offsetWidth由于未知原因未提供正确且正确的宽度

我正在使用此代码，但如上所述，它不起作用

<script type="text/javascript">
document.getElementById("fb_share").style.marginLeft = parseInt((document.getElementById("vss_border").offsetWidth / 2) - (document.getElementById("fb_share").offsetWidth / 2)) + "px";
</script>

如果通过CSS有任何其他解决方案（但它必须是边距左边，没有宽度变化）请告诉。

Answer 1

既然你说过JavaScript，我就不能避免提到jQuery的position function：

$("#myDiv").position({
   my: "center",
   at: "center",
   of: $('#parent')
});

Answer 2

这实际上是一个很常见的问题。不同浏览器以不同方式理解这些内容的事实加剧了这个问题。最简单的事实是非CSS：

<div id="parent" style="width:100%">
    <div align="center">
       your own stuff
    </div>
</div>

但是如果您需要在纯CSS中执行此操作，那么答案将是这样的：

在你的CSS中：

div.parent {
  text-align: center;
  width: 100%;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

div.child {
  text-align: left;
}

然后，在你的HTML中，你会有这样的东西：

<div class="parent">
  <div id="wrapper">
    <div class="child">
      Your stuff here
    </div>
  </div>
</div>

我使用这种（第二种）方法将整个页面内容集中在浏览器窗口中（在我的情况下，而不是第一个div，我有<body>。如果你想看看我在哪里使用它，有看看http://www.ooklnet.com/

Answer 3

我找到了你的问题。子宽度设置为691px，因此一旦尝试将fb_share div居中，它只会将其设置为几个像素。

您所要做的就是设置样式，例如：

<div id="fb_share" style="width:150px;">

击穿

您的javascript没有错。

孩子的宽度几乎与父母相同，导致最小的中心。

设置子宽度正确，所有都应该正常工作

使用JavaScript在父div中居中div

3 个答案: