Centre div horizontalement

Sur cette page, je voudrais horizontalement au centre de la main #div conteneur par rapport à la page. Normalement, je devrais l'obtenir par l'ajout d'une règle CSS,

#container { margin: 0 auto }

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

Est-il possible que je puisse réaliser ce centrage horizontal sans avoir à réécrire la mise en page à utiliser positionnement statique? Je n'ai pas de problème avec l'utilisation de JavaScript/JQuery si c'est la seule voie pour atteindre mon objectif.

Est l'aide de script OK?
bonne question, j'ai mis à jour mon post avec la réponse (oui)
dans ce cas @rquinn a la réponse pour vous
Pour info, vous devrez modifier la position de la #container à position:relative, qui, essentiellement, vous devriez être en mesure de le faire sans affecter trop de choses, aussi longtemps que le #conteneur est le outter la plupart élément.

OriginalL'auteur Dónal | 2011-01-12

Même que @rquinn réponse, mais cela permettra de s'ajuster à n'importe quelle largeur. Cochez cette démo

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();    
    });
});

Pourquoi n'avez-vous pas accepté une réponse? Vous avez aimé n'est-ce pas? 😀

OriginalL'auteur Starx

Vous pouvez également 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 la $(document).ready événement:

$(document).ready(function() {

    setMargins();

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

OriginalL'auteur Ryan Quinn

1

de la largeur du conteneur est 1024px, de sorte que vous pouvez essayer de donner un à gauche de la valeur de 50% et de la marge gauche:-512px.

ce ne serait pas le travail à l'écran avec 800px serait-il? ou 1280, ou 1360 ........ AINSI DE SUITE
pourquoi pas? vous pouvez essayer avec le redimensionnement de votre fenêtre.
il va travailler sur de plus grands écrans, mais sur les plus petits, l'utilisateur ne sera pas en mesure de voir l'image entière. (Il ne sera pas possible de faire défiler les afficher à l'écran)

OriginalL'auteur Berkin Berkcan Çırak

À l'aide de Javascript, cela permettra de mettre #container au centre 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';

OriginalL'auteur Alejandro

Si votre conteneur principal est l'aide de absolute position, vous pouvez utiliser cette CSS pour centrer horizontalement;

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

OriginalL'auteur Sarfraz

C'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;
}

Mais ce travail si #de Contenu et les éléments enfants sont en position absolue?
cela fonctionne même pour les enfant de l'élément, si possible, pouvez-vous me donner plus de détails

OriginalL'auteur Mikul Gohil

De cette façon, le mieux fonctionné pour moi. Sans changer les marges, mais la position.
Requis:
objet -> margin-left: 0; position: relative;

vérifier 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ée à l'intérieur d'un conteneur.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.