Question

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

现在我正在使用左：20％，但并不总是居中，具体取决于用户的屏幕分辨率

Answer 1

您希望div相对于浏览器窗口增长，还是要将内容放在其中？

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

如果是后者，请不要使用浮动...首先设置width:auto;（我认为应该自动扩展以适应内容）。然后你需要一些javascript来测量DIV的宽度，设置width: css属性（以像素为单位），然后测量浏览器窗口，并根据这些测量值对容器进行居中。

<罢工>

~~抱歉，我错了宽度：auto;。我想只是漂浮它，然后使用像我上面描述的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菜鸟：）

Answer 2

您可以尝试使用

.mainWindow {
    margin: 0 auto;
}

然后确保父元素是text-align：center;

Answer 3

我通常使用一个以汽车为中心的容器div，然后将任何其他容器（如浮动div）放入该容器内。有什么特别的理由你不能这样做吗？

示例CSS：

#container {
width: 960px;
margin: 0 auto;
position: relative;
}

CSS：根据屏幕宽度居中浮动：左侧元素？

3 个答案: