jquery - 将宽度超出视口(viewport)的元素居中

Question

我想将宽度超出视口(viewport)的元素居中(即元素 = 1000 像素/视口(viewport) = 800 像素)。我已经尝试过基本的 CSS (margin = 0 auto) 但它不起作用。如果有人能帮助我，那就太好了!

我有三个子元素 (.project)，它们的宽度是通过 jQuery 计算的。此外，这三个子元素的总和就是我的父元素 (#projects) 的宽度。

这是一个jsFiddle .

干杯

$(window).on( "resize", function () {
    var projectWidth = ( $(window).width() / 2.8 );
    $(".project").css({ width : projectWidth.toFixed() });

    var projectSum = 0;
    $("#projects .project").each( function(){ projectSum += $(this).width(); });
    $(".container").css({ width : projectSum });        
}).resize();

Answer 1

使用 CSS 非常简单。下面是一个示例，其中 body 设置为 400px 宽度，600px 元素在中间对齐。

数学很简单 (containerWidth - divWidth)/2 然后使用这个值作为 margin-left 和 margin-right 你可以使用来自 JS 的动态宽度。

http://jsfiddle.net/da8y64ww/1/

body {
    width:400px;
    border:1px dotted blue;
    margin:0 auto;
}
#foo {
    width:600px;
    height:100px;
    border:1px solid green;
    margin-left:-100px;
    margin-right:-100px;
}