CSS:根据屏幕宽度将 float:left 元素居中？

Question

我必须使用 float div(我的应用程序的主窗口)，并且我想根据客户端的屏幕宽度将 float DIV 居中。我怎样才能做到这一点？

现在我使用的是 left:20% 但这并不总是居中，这取决于用户的屏幕分辨率

Answer 1

您希望 div 相对于浏览器窗口增长，还是适合其中的内容？

如果是前者，您可以只使用基于百分比的宽度而不是像素，它仍然应该居中。

如果是后者，不要使用 float ...从设置 width:auto; 开始(我认为这应该让它自动扩展以适应内容)。然后您将需要一些 javascript 来测量 DIV 的宽度，以像素为单位设置 width: css 属性，然后测量浏览器窗口，并根据这些测量值将容器居中。

对不起，我错了 width:auto;。我想只是 float 它，然后像我上面描述的那样使用 javascript 手动设置 margin-right 和 margin-left。

---

抱歉，想到了更好的解决方案。

#float { 
    float:left;
    margin-left:50%;
    position:relative;
}

然后，使用 jquery，

$(document).ready(function() {
    var float_width = $('#float').width();
    var left_spacing = float_width / 2;

    $('#float').css('left', '-' + left_spacing);
});

如果我的 javascript 关闭或不能正常工作，请原谅我......我没有测试它，我是一个 JS 菜鸟 :)