Centre div horizontalement

Question

Sur this page, je voudrais centrer horizontalement le div #container principal par rapport à la page. Normalement, je réaliserions en ajoutant une règle CSS,

#container { margin: 0 auto } 

Cependant, la mise en page de cette page (que je n'ai pas écrit), utilise le positionnement absolu pour #container et la plupart de ses éléments enfants, de sorte que cette propriété a aucun effet.

Est-il possible de réaliser ce centrage horizontal sans réécrire la mise en page pour utiliser le positionnement statique? Je n'ai aucun problème avec l'utilisation de JavaScript/JQuery si c'est la seule façon d'atteindre mon objectif.

Answer 1

Identique à la réponse @rquinn, mais ceci s'adapte à n'importe quelle largeur. Cochez cette démonstration

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div> 

CSS:

* { margin:0;padding:0; } 
#container { 
    width:50px; 
    position:absolute; 
    height:400px; 
    display:block; 
    background: #ccc; 
} 

Javascript

function setMargins() { 
    width = $(window).width(); 
    containerWidth = $("#container").width(); 
    leftMargin = (width-containerWidth)/2;  
    $("#container").css("marginLeft", leftMargin);  
} 

$(document).ready(function() { 
    setMargins(); 
    $(window).resize(function() { 
     setMargins();  
    }); 
}); 

Answer 2

La largeur du conteneur est de 1024px, vous pouvez donc essayer de donner une valeur à gauche de 50% et une marge à gauche: -512px.

Answer 3

En utilisant Javascript, ceci placera #container au centre de la fenêtre de votre navigateur.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px'; 
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px'; 

Answer 4

Vous pouvez utiliser aussi utiliser jQuery:

function setMargins() { 
    var width = $(window).width(); 
    if(width > 1024){ 
     var leftMargin = (width - 1024)/2; 
     $("#container").css("marginLeft", leftMargin);  
    } 
} 

Puis-je mettre ce code après l'événement $(document).ready:

$(document).ready(function() { 

    setMargins(); 

    $(window).resize(function() { 
     setMargins();  
    }); 
}); 

Answer 5

Si votre conteneur principal utilise la position absolute, vous pouvez utiliser ce CSS pour le centrer horizontalement;

#container { 
    position:absolute; 
    width:1000px; /* adjust accordingly */ 
    left:50%; 
    margin-left:-500px; /* this should be half of the width */ 
} 

Answer 6

Il est simple. Essayez cette

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */ 
} 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto". */ 
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
} 

Answer 7

De cette façon fonctionne le mieux pour moi. Sans changer les marges, mais la position. Obligatoire: objet -> marge-gauche: 0; et position: relative;

chèque par exemple ici: jsfiddle code:

function setObjPosition(container, object) { 
    var containerWidth = $(container).width(); 
    var objectWidth = $(object).width(); 

    var position = (containerWidth/2) - (objectWidth/2); 

    $(object).css('left', position); 
} 

function setPositionOnResize(container, object) { 
    setObjPosition(container, object); 
    $(container).resize(function() { 
     setObjPosition(container, object); 
    }); 
} 

Utilisation:

<script type="text/javascript"> 
    $(document).ready(function() { 
     setPositionOnResize(window, "#PanelTeste"); 
    }); 
</script> 

Il peut être centré dans un conteneur.