centrage CSS: la marge à gauche et à droite de l'auto, mais de drôles de résultats

Vous pouvez visualiser la page à http://led.dlugosz.com/.※ je veux faire de la "Galerie" de la section centré dans l'espace disponible, de ne pas aligné à gauche.

Donc, j'ai ajouté des règles 

margin-left: auto;
margin-right: auto;

et il semblait de travailler juste à droite. Mais, quand j'ai fait la même chose sur une autre page, il ne fonctionne pas du tout, et je ne trouve pas de différence. Ensuite, les jeux de cette page, un peu plus, je trouve qu'à différentes largeurs de fenêtre, il fonctionne, ne fonctionne pas, ou fait quelque chose de très bizarre. Ce qui se passe ici? Plus au point, comment puis-je réaliser cet effet?

※ J'ai mis à jour la page et finalement retiré.

InformationsquelleAutor JDługosz | 2011-04-02
  1. 3

    marge automatique a fonctionné pour moi dans tous les cas, avec une largeur fixe de les utiliser autrement

    http://css-tricks.com/centering-in-the-unknown/

    InformationsquelleAutor Gulfaraz Yasin
  2. 2
    • Sur #main_col, ajouter margin-right: 20.5em - c'est la même width (18em) que votre barre latérale de droite, et un peu plus de marge.
    • Sur #main_col h2, retirez le margin-right propriété.
    • Sur #main_col div > *, retirez le margin-right propriété.
    • Sur #galleries ul, retirez le margin-left et margin-right propriétés, et ajouter display: inline-block.
    • Sur #galleries, ajouter text-align: center.
    • Sur #main_col h2 et #galleries ul li, ajouter text-align: left.

    Testé dans Firefox uniquement.

    • L'ajout de la marge de #main_col est particulièrement important, parce qu'en ce moment vous êtes à recourir à l'ajout de droit-margin/padding pour l'ensemble de votre contenu. C'est beaucoup, beaucoup plus facile si vous ajoutez les marges et padding à l'élément conteneur plutôt que chaque élément de contenu.
    • L'ajout de la marge à droite sur #main_col me donnera une colonne droite. Je veux de l'image de boutons autour de la barre latérale, une fois qu'il est effacé. Peut-être la chose même est ce qui confond le navigateur de mise en page? Votre suggestion de l'autre, de centrer le contenu en ligne au sein de l'ul plutôt que de l'ul lui-même, a fait le tour. Bizarre les lignes sont différentes, mais c'est très bien.
    • Êtes-vous sûr que vous voulez le "image buttons to flow around the side bar once it is cleared" - votre site ressemble à ça quand il fait ça: http://i.imgur.com/EyZfl.jpg (pas grand) - mais si vous êtes sûr que c'est ce que vous voulez, alors c'est le contraire de l'amende. Si j'ai résolu votre problème, veuillez accepter ma réponse. Merci.
    InformationsquelleAutor thirtydot
  3. 2

    margin-left :auto et margin-right:auto centre de l'élément si vous définissez display: block et spécifiez la largeur de l'élément de l'élément aligner au centre.

    ou d'autre

    margin: 0 auto;
width: 100px;
display: block;
    • Dans les réponses précédentes, vous verriez que je ne veux pas la broche de la largeur réelle de l'élément.
    InformationsquelleAutor Bibek
  4. 1

    Utiliser ce lieu,

    .wrap {width: 980px; margin: 0 auto;}

    Où div class="wrap" serait ce que vous voulez de centre.

    • Je ne veux vraiment pas à la broche de la largeur réelle de l'élément, et je ne vois pas pourquoi mettre l'auto marge dans une autre "classe" ne fait aucune différence. Peut-être vous êtes juste partage de votre idiome, plutôt que de chercher pourquoi mon utilisation actuelle de la même technique est en train de faire de drôles de choses?
    InformationsquelleAutor PHP
  5. 1

    Avez-vous l'utilisation de Firebug sur l'autre page pour être certain que le margin-left et margin-right propriétés ont été affectés à cet élément? Ils peuvent avoir été remplacée par une règle CSS avec une priorité plus élevée.

    • Oui j'ai vérifié la configuration dans Firebug.
    InformationsquelleAutor blackcatweb
  6. 0

    Corrigez-moi si je me trompe, mais je crois que le "margin-left:auto;" et "margin-right:auto;" uniquement les valeurs de travail sur les éléments de bloc. Si vous voulez centrer des éléments en ligne vous devez utiliser "text-align:center;".

    InformationsquelleAutor JustasM