2010-07-12 19 views
15

Voglio un componente che mantenga il centro orizzontale della pagina (a due colonne), e ho un sottocomponente (colonna a destra) che voglio che la sua posizione sia fissa, quindi il sub- posizione del componente da correggere, ma le due colonne intere devono essere centrate.Posizione fissa CSS con Auto Margin

#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; 
} 

risposta

33

Non puoi farlo con margin:auto, ma si può fare qualcosa di simile:

#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; 
} 

In questo modo si sposta elemento a destra per il 50%, e poi passare di nuovo per la metà del suo larghezza. In questo modo ottieni l'elemento centrato con position:fixed.

+1

Attendere! Se hai altri elementi con 'margin: auto' e' position: relative', quando provi a ridimensionare la larghezza del browser, scoprirai che i due livelli non si allineano correttamente. Questo è un bug comune dei CSS. – Raptor

+0

Questa risposta è corretta se si dispone di una larghezza di correzione. Per la larghezza del fluido (i.e.100%) si prega di considerare la risposta di pstenstrm mostrata sotto "È possibile utilizzare il margine: 0 auto con posizione: fisso se si imposta a sinistra ea destra." –

+0

Per le persone nuove che arrivano a questo thread: usa la soluzione postata sotto –

0

Mi piace usare un wrapper come asolution per questo problema:

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

È possibile utilizzare margin: 0 auto con position: fixed se si imposta left e right.

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

Questo funziona anche con position: absolute; e verticalmente.

Demo: http://codepen.io/pstenstrm/pen/myaWVJ

+3

Questa risposta più recente è molto più semplice e più affidabile della risposta accettata (che, in tutta onestà, era di quattro anni fa.) – BFWebAdmin

+0

è semplicemente bellissima! Grazie. – gdaniel

Problemi correlati