Jqueryで要素を中央に配置

Question

要素を中央に配置しようとしています。要素の幅が変わる可能性があるので、CSSメソッドmargin: 0 autoを使用することはできません。

$.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を設定するだけです。あなたは左の位置を設定する数式を使用して、position:absolute;して、あなたの要素を配置することができます

Answer 2

それは作品があります。

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

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

Answer 3

私は最近使用した 'ゲーム' のidを持つdiv要素内に含まれ、 'GameCanvasの' のidを持つcanvas要素を中央に：

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

をコンテナのIDを知っている場合は、 '#gameCanvas'をthisに、コンテナの番号を '#game'に変更してください。

Answer 4

とまったくマージンを設定しないでください..他の方法では、要素position:relative;を配置し、outerWidthを使用して要素の幅を設定し、次に配置します。margin:0 auto;