Question

单击按钮以居中div，再次单击以左对齐。这适用于IE6以外的所有浏览器。 IE6不支持margin:0 auto;我该如何解决这个问题。 div宽度是动态的，并不总是200px。

检查jsfiddle http://jsfiddle.net/hZ23J/1/

<button id="center">Left Align</button>
<div></div>

$('#center').toggle(function() {
    $('div').css('margin', '0');
    $(this).text('Center Align')
}, function() {
    $('div').css('margin', '0 auto');
    $(this).text('Left Align')
});

Answer 1

对于IE6使用

body{
text-align:center;
}

你的jQuery代码看起来像

$('#center').toggle(function() {
    $('div').css('margin', '0');
    $('body').css('text-align', 'left');
    $(this).text('Center Align')
}, function() {
    $('div').css('margin', '0 auto');
    $('body').css('text-align', 'center');
    $(this).text('Left Align')
});

检查http://jsfiddle.net/jNWYP/1/

处的工作示例

Answer 2

此解决方案适用于IE6 ...

$('#center').click(function () {
    $('div').toggleClass('center');
});

...类

.center { margin: 0px auto; }

在可能的情况下保持JS和CSS分离也是一种好习惯。

这是我的doctype ......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE6中的jQuery Center Div切换

2 个答案:

检查http://jsfiddle.net/jNWYP/1/