在附加元素时正确居中-Jquery答案

【问题标题】：Centering properlly-Jquery while appending elements在附加元素时正确居中-Jquery
【发布时间】：2014-04-22 23:01:40
【问题描述】：

我在每个周期 (Fiddle) 将元素附加到我的容器 div 并在不同的位置（左、上、右、下）居中；但是，如果您查看顶部位置，则它没有正确居中！这是为什么呢？

为了以顶部位置为中心，我正在做：

         top: 0,
        right: (docWidth / 2) + $mainMenu.width()/2,
        left: (docWidth / 2) - $mainMenu.width()/2

第二个问题是，对于左边的位置，我不知道为什么我必须在下面的代码中添加4：

         left: (docWidth - $mainMenu.width()-4),
            top: (docHeight / 2) - 20,
            bottom: (docHeight / 2) + 20

如果你删除 4 它就会退出浏览器！为什么这里需要 4 个？

感谢任何帮助！

【问题讨论】：

标签： jquery

【解决方案1】：

我看到两个问题：

问题 #1

关于在计算left位置时需要减4，我认为这是由于每个按钮的文本内容可以超出其按钮的边界。

因此，当按钮一直移动到右侧时，其文本内容会超出窗口边界并导致滚动条。

在按钮上添加overflow:hidden，这样文本内容就不会溢出。

.menuBtn {
    ...
    overflow:hidden;
}

然后你可以删除-4:

left: (docWidth - $mainMenu.width()),

关于按钮不在最顶部居中的问题，我认为这是由两件事引起的。

首先，每个按钮都有一个左边距，包括行中的第一个按钮。该边距使居中偏离。消除第一个按钮的左边距：

#link1  {
    margin-left:0;
}

此外，由于您的动画函数是在计时器上运行的，因此它可能会在前一个动画完成之前被调用。因此，按钮集的计算宽度可能不准确。

我将你的函数调用从计时器移到最后一个动画的回调中：

...
, 1000,function(){
    $( "#container" ).append( "<div class='menuBtn' ><span>test!</span></div>" );       
    my_animation();
})

解决这两个问题似乎有所帮助：

【讨论】：