0

我正在尝试将 div 水平居中到一个标记，如您在此处看到的http://jsfiddle.net/rKejG/8/，但是它比它应该的更靠右一点。

这是我的代码

$("#infobox").css({
    marginLeft: (parseInt($("#content").width(), 10) / 2) - (parseInt($("#infobox").width(), 10) / 2) + 'px'
});

然后我意识到我可能应该添加 和 的一半content并将infobox它们放在负边距中，但这使它变得更糟：

$("#infobox").css({
    marginLeft: '-' + (parseInt($("#content").width(), 10) / 2) + (parseInt($("#infobox").width(), 10) / 2) + 'px'
});

Result: margin-left: -16110.5px

我在这里做错了什么？谢谢！

4

2 回答 2

1

我清理了 html 并将marker类设置为position: relative. 这似乎已经解决了你的问题。我还去掉了额外的填充，并删除了标记类中的额外边距。我想我在css中做了一些其他的改变，你必须比较原始的。有很多东西要清理。

小提琴

更新：现在我回去了，相对于绝对定位元素的父级的位置是很好的做法，但不是必需的，也不是解决此问题的原因。信息框类中的额外填充和内容类中的静态边距以及未嵌套的 html 解决了该问题。

[更新][更新]

根据您所拥有的，我认为您需要一个带有 css 的包装器，width:100%; padding-top:45%; position:relative然后设置您的子 div，margin: 0 auto如本小提琴http://jsfiddle.net/bfelda/rKejG/22/所示 您可以将容器的顶部填充设置为当然是你想要的。但是我可能错过了重点。无论标记位于何处，您都希望文本居中在标记上方吗？

于 2013-02-06T22:07:53.643 回答
1

试试这个，我稍微改变了你的脚本，但它产生了正确的结果。

http://jsfiddle.net/rKejG/15/

JS代码：

   //for vertical center position
   var top = +$("#content").offset().top + +$("#content").height();
   $("#infobox").css("top", top);


   //for horizontal center position
   var left = +$("#content").offset().left - +$("#infobox").width()/2;
   $("#infobox").css("left", left);

HTML：

  <div id="content" class="marker"></div>
  <div id="infobox" class="infobox">BEER PALACE Restaurant & Pub</div>

我不明白你为什么要使用边距来对齐你的“信息框”div，所以我只使用了绝对定位。无论“内容” div 位于页面上的哪个位置，这都应该有效。

我也无法弄清楚为什么您将“信息框” div 附加到“内容” div 中，如果这应该在事件之后显示“信息框”（我根据您的命名做出的假设），您可能不希望它是一个孩子，而是一个兄弟姐妹。当然让我知道如果这个假设是错误的，我可以随时修改小提琴。

于 2013-02-06T22:08:29.303 回答