come rendere div center orizzontalmente con posizione fissa?

voglio div per essere il centro in senso orizzontale, codice CSS è questo:come rendere div center orizzontalmente con posizione fissa?

<style type="text/css"> 
#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:500px; 
      margin: auto;/*left:auto; right:auto;*/ 
} 
</style>

e codice html:

<body> 
<div id="footer">hello world</div> 
</body>

penso che ci sia bisogno di spiegare il mio codice CSS, è quasi auto esplicativo, ma il div non è centrato orizzontalmente, c'è un modo per farlo? Grazie in anticipo.

fonte

2013-04-17 hiway

posizione: fissa e margine: auto; non funzionano bene insieme, sto lavorando a una soluzione per te. –

Prova questo

#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:80%; 
    margin: 0 0 0 -40%; 
    left:50%; 
}

JS Fiddle Example

Il punto da notare qui è, il negativo margin-left di esattamente la metà valore di width e impostare lo left 50% del corpo

fonte

2013-04-17 11:32:36 Sachin

la tua risposta e @ gregbenner's usano entrambi questo "trucco", innanzitutto, grazie. Ho anche cercato google e anche gli altri usano in questo modo, mi chiedo se non c'è un modo "difficile" per farlo? – hiway

Questa è in realtà una bella soluzione. Ma non è esattamente quello che vuole fare. In questo modo il footer diventerà reattivo e non avrà la sua larghezza fissa di 500px. –

@Nick, ma ho anche detto che il trucco dietro di esso. (s) può facilmente cambiare le dimensioni come (s) che gli piace. – Sachin

Mettere un altro div al suo interno con posizione relativa, margine: auto. Assegna il valore fisso al 100% della larghezza.

altrimenti si può incidere con margine negativo 'trucco'

div { 
    position: fixed; 
    left: 50%; 
    width: 500px; 
    margin-left: -250px; 
}

fonte

2013-04-17 11:30:05

Questo dovrebbe funzionare bene per voi. Funziona aggiungendo un contenitore div.

<style> 

#footer-container{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 

#footer 
{ 
    width:500px; 
    margin:0 auto; 
    margin-bottom:20px; 
    background-color:red; 
} 
</style> 


<div id="footer-container"> 
     <div id="footer">hello world</div> 
</div>

fonte

2013-04-17 11:37:59

" text-align: center; " farà sì che il testo centrerà e IE6 funzionerà. se non vuoi centrare, ma come IE6 lavorare. aggiungi allineamento del testo: a sinistra al div di #footer. –

Se si lavora con i browser moderni è possibile utilizzare il modulo di layout FlexBox: http://caniuse.com/#feat=flexbox.

Flexbox documentazione: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes~~V~~singular~~3rd
Nota: Non è possibile inserire più di due collegamenti a causa di mio rappresentante.

JSFiddle.

(utilizzando un tag al posto di un div#footerfooter come è più semplice.)

<div id="footer-container"> 
    <footer>hello world</footer> 
<div>

#footer-container { 
    bottom: 20px; 
    position: fixed; 

    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

footer { 
    width: 500px; 

    background-color: red; 
}

justify-content: center;#footer-container 'centri' l' infanzia, che è solo l'elemento footer in questo caso.

Questo è molto simile alla soluzione di Nick N., ad eccezione del fatto che non è necessario ripristinare la proprietà text-align sul piè di pagina e che questo è probabilmente il modo non-'trick 'desiderato.

La soluzione accettata è leggermente disattivata poiché la larghezza del piè di pagina in questo caso è variabile (80%) anziché a 500px.

Per altri lettori, se il genitore è un elemento form, e il bambino è un elemento input, utilizzare flex: 1; sull'elemento input (bambino), e utilizzare max-width: 500px; invece di width: 500px;.L'utilizzo di flex: 1; dovrebbe rendere l'elemento input espandibile per riempire la larghezza dell'elemento form, che altrimenti non potrebbe essere.

fonte

2014-12-25 05:09:40 xd1le

Questa soluzione funziona alla grande. Dovrebbe davvero avere un modo di etichettare le risposte come "browser moderni" in modo da poterle ordinare in alto quando supportano solo i browser moderni. –

come rendere div center orizzontalmente con posizione fissa?

risposta

Problemi correlati