CSS position Fixe avec des Auto de la Marge

Je veux un composant qui maintient horizontalement au centre de la page (deux colonnes), et j'ai un sous-composant (colonne de droite) que je veux sa position fixe, de sorte que le sous-position du composant afin d'être fixé, mais l'ensemble de deux colonnes centrée.

#content {
    width: 1200px;
    height:auto !important;
    height:100%;
    min-height:100%;
    padding-top: 42px;
    padding-bottom: 100px;
    margin-auto: 0 auto;
    position: relative;
}

#left {
    width: 700px;
    float: left;
}

#right {
        width: 500px;
        position: fixed;
        top: 0px;
}

OriginalL'auteur bernardw | 2010-07-12

  1. 34

    Vous ne pouvez pas le faire avec margin:auto, mais vous pouvez faire quelque chose comme ceci:

    #CSS-SELECTOR-YOU-ARE-USING{
    background:#FF0000; //Just so you can see whats going on
    position:fixed; //Position the element
    right:50%; //Move it to the right for 50% of parent element
    margin-right:-250px; //You need here to put 1/2 of what you have below in width
    width:500px;
}

    De cette façon, vous déplacez l'élément vers la droite pour 50%, puis le déplacer de retour pour la moitié de sa largeur. De cette façon, vous obtenez centrée élément avec position:fixed.

    Attendez ! Si vous avez d'autres éléments à margin: auto et position: relative, lorsque vous essayez de redimensionner la largeur du navigateur, vous trouverez les deux couches ne sont pas s'aligner correctement. Il s'agit d'un bug de CSS.
    Cette réponse est correcte si vous avez une largeur fixe. Pour le fluide largeur (j'.e.100%) s'il vous plaît envisager de pstenstrm de réponse indiqué ci-dessous "Vous pouvez utiliser margin: 0 auto avec position: fixed si vous définissez à gauche et à droite."
    Pour les nouvelles personnes qui viennent dans ce thread: l'utilisation de la solution affiché en dessous
    N'est-ce pas la même chose et plus facile à mettre right:25% et éviter d'utiliser la marge de droite ? Il faudrait faire la même chose, étant donné que 25% de 1000 à 250 ? Suis-je tort ?
    C'est un brillant hack. Merci!!!!

    OriginalL'auteur Gavrisimo

  2. 50

    Vous pouvez utiliser margin: 0 auto avec position: fixed si vous définissez left et right.

    .wrapper {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 500px;
    margin: 0 auto;
}

    Cela fonctionne également avec les position: absolute; et verticalement.

    Démo: http://codepen.io/pstenstrm/pen/myaWVJ

    je suggère d'accepter cette réponse 😉
    Merci monsieur, votre solution est la meilleure. J'ai utilisé left: 50%; transform: translateX(-50%); mais il a tendance à brouiller le contenu de la page dans certaines situations.

    OriginalL'auteur pstenstrm

  3. 0

    J'aime utiliser un wrapper comme asolution pour ce problème:

    .wrapper {
  position: fixed;
  width: 100%;
  top: 0px;
}
.wrapper .right {
  width: 500px;
  margin: auto;
}

    OriginalL'auteur Cameron Drake