Question

我有一个div，我想把它放在中心位置。这很好用：.div{ position: relative; width: 300px; margin: 0 auto;}。问题是我需要使用jQuery $('div').height()来获取div的高度但是，这会返回0，但如果我将float: left添加到div，那么jQuery可以工作，但div不再居中

我该怎么办？

由于

Answer 1

如果你在div中没有内容，它将返回零，除非你指定静态高度/最小高度。

http://jsfiddle.net/NySST/2/

Answer 2

如果您可以放置div的精确宽度和高度，则可以轻松地使用jquery进行居中。

或者你可以试试这段代码

$(document).ready(function(){

    $(window).resize(function(){

        $('#your-div-id').css({
            position:'absolute',
            left: ($(window).width() - $('#your-div-id').outerWidth())/2,
            top: ($(window).height() - $('#your-div-id').outerHeight())/2
        });

    });
    // To initially run the function:
    $(window).resize();

});

Answer 3

假设<div>中的是内容，您可能无法正确清除内部元素的浮点数。尝试将overflow: hidden添加到<div>，看看是否能解决问题。

快速查看您是否正确清除浮动内容的方法是为<div>提供background: red任意背景颜色，例如<div>，它会告诉您如何包装内容，如果有的话。有关我正在谈论的内容的示例，请参阅http://jsfiddle.net/Wexcode/PUETN/。 请注意，红色背景的高度代表包含{{1}}的高度。

Answer 4

如果您的div具有已定义的宽度，您可以尝试设置样式margin-left;汽车;余量右：汽车;

用CSS中心Div

4 个答案: