用CSS居中Div

问题描述:

我有一个div,我想居中。这工作正常:.div{ position: relative; width: 300px; margin: 0 auto;}。问题是我需要获得div的高度,使用jQuery $('div').height()但是,这将返回0,但如果我将float: left添加到div,那么jQuery的作品,但该div不再居中。用CSS居中Div

我该怎么办?

感谢

+0

即使没有'float:left' http://jsfiddle.net/z2CVW/3/,你应该可以获得高度。你在测试哪个浏览器? – ShankarSangoli 2012-03-16 18:00:14

+0

尝试添加溢出:auto;到div。这可能不是解决方案,因为您的问题中没有太多细节,但尝试不会受到伤害:P – scumah 2012-03-16 18:00:15

+0

.div属于哪个标签?或者它应该是div? – 2012-03-16 18:00:30

如果你没有在div里面的内容将返回除非你指定静态的高度/最小高度吧。

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

如果你的div有一个定义的宽度,你可以尝试设置样式保证金左;汽车;保证金右:自动;

+0

从来没有听说过'align-left'和'align-right'auto? – 2012-03-16 17:59:09

+0

当他已经这样做时,这是如何解决他的问题的? – Sparky 2012-03-16 19:33:36

如果你可以把精确的宽度和高度的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(); 

}); 

假设有是您<div>内容,你可能不清除您的内部元素正确的浮动。尝试将overflow: hidden添加到您的<div>并查看是否可以解决问题。

查看您是否正确清理浮游物的快速方法是为您的<div>指定任意背景色,例如background: red,它会告诉您如何包装内容(如果有的话)。有关我正在谈论的示例,请参阅http://jsfiddle.net/Wexcode/PUETN/请注意,红色背景的高度代表包含<div>的高度。