Question

我正试图集中一个元素。元素可能会改变宽度，因此我无法使用margin: 0 auto的CSS方法。

这是我的代码：

$.fn.center = function() {
    $(this).css({
        'margin-left': ($(this).parent().innerWidth() - $(this).outerWidth()) / 2  + "px",
        'margin-right': ($(this).parent().innerWidth() - $(this).outerWidth()) + ($(this).outerWidth() / 2)  + "px"
    });   
};
$('#nav').center();

不幸的是，这不起作用。你能帮我搞清楚为什么吗？我应该使用绝对定位吗？

感谢。

Answer 1

不需要这一切..

由于您要将子元素（li）设置为内嵌块，因此只需将容器#nav设置为text-align:center。

并且根本不设置任何边距..

Answer 2

您可以定位元素position:absolute;，然后使用公式设置左侧位置。其他方法是定位元素position:relative;，并使用outerWidth设置元素的宽度，然后使用margin:0 auto;

定位

Answer 3

它可能有效：

var space = ($(this).parent().width() - $(this).width) / 2;

$(this).css({marginLeft : space , marginRight : space});

Answer 4

将id为'gameCanvas'的canvas元素居中，包含在我最近使用的id为'game'的div中：

$('#gameCanvas').css('margin-left', ($('#game').width() - $('#gameCanvas').width()) / 2);

因此，如果您知道自己的容器ID，请将“#gameCanvas”替换为this，将“#game”替换为容器ID

使用Jquery将元素居中

4 个答案: