Question

我正在使用一些jQuery在元素的顶部和左侧添加负边距，以便在div中居中对齐。

        $('.centred').each(function(event) {
            $(this).css({"margin-top": - ( ($(this).outerHeight()/2) ), "margin-left": - ( ($(this).outerWidth()/2) ) });
        });

我已将此jQuery设置为在页面加载和调整大小时运行，由于某种原因，页面加载时页边距不正确，但如果我调整窗口大小，则它们是正确的。

EXAMPLE

有关如何解决此问题的任何想法？谢谢！

Answer 1

问题是，当您的页面加载时，每个.view_project的宽度都应该小于它应该的宽度，因为它被向上推到它的容器的右侧，并且句子被打破，从而形成一个新行。您可以通过更改white-space的{{1}}属性来保持宽度：

<强> CSS

.view_project

此外，您可以对jQuery进行一些改进：

.view_project {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial;
    padding: 12px 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    white-space:nowrap;
}

JSFiddle

为什么在页面加载时outerWidth（）不能正常工作？

1 个答案: