bisogno di aiuto centraggio CSS con posizionamento assoluto
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Non sono mai stato completamente soddisfatto delle mie varie soluzioni per centrare i contenuti in una pagina web. il tag <center> è stato deprecato a metà del XVIII secolo, ma non riesco a vedere un'alternativa ragionevole. In particolare quello che voglio è avere un DIV genitore centrato, ma contro il cui angolo in alto a sinistra posso impostare le cose & Quot; assolutamente & Quot ;.
C'è un modo per farlo senza usare window.onresize javascript che rimisura tutto? Sembra un'idea abbastanza semplice ... Voglio che le cose siano assolutamente posizionate, voglio solo che le coordinate 0,0 siano relative a qualcosa di diverso dall'angolo in alto a sinistra della finestra del browser.
In questo momento, quello che faccio è impostare un div in modo da centrare il suo contenuto e quindi spostarlo con un posizionamento relativo, ma è molto noioso perché gli oggetti relativi continuano a spingersi l'un l'altro in modi che non voglio assolutamente.
Qualsiasi e tutti i pensieri su questo molto apprezzato.
Soluzione
È questo quello che stai cercando?
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
Altri suggerimenti
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Solo un esempio di codice, ma qualsiasi elemento .child sarebbe a 0,0 del wrapper
Qualsiasi elemento posizionato in modo assoluto si posizionerà in modo assoluto sul genitore relativo alla posizione più vicino. Se un elemento non ha un genitore con relativo posizione, utilizza solo il documento. Di seguito è riportato un esempio senza classi (alcuni stili di colore e larghezza aggiunti per maggiore chiarezza).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
Se stai rispettando position: absolute;, imposta il div su cui vuoi che le cose posizionate abbiano position: relative; per renderlo nel contesto di posizionamento per tutti gli elementi figlio.
Per centrare un div assolutamente posizionato devi conoscere la sua larghezza, quindi usa il seguente CSS:
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
E l'HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Puoi modificare la larghezza e il margine sinistro quando ne hai bisogno (il margine sinistro negativo dovrebbe essere la metà della larghezza del div che stai centrando, ad es. #child.
Come altre persone hanno menzionato, usare margin: 0 auto; su un elemento con una larghezza impostata su di esso lo centrerà.
Il modo migliore per centrare le cose è usare il " margin: auto " tag css. Funziona in FF e Safari. Basta dare un div un po 'di larghezza e un margine auto, e se il genitore ha una larghezza del 100%, allora questo div si allinea automaticamente al centro.
Perché questo funzioni in IE, devi usare l'attributo text-align: center sul genitore e poi text-align a sinistra sul div centrato effettivo.
AFAIK, non c'è modo di cambiare le coordinate assolute da 0,0 a qualche altro punto arbitrale. Il parente è la strada da percorrere.
forse non ho capito il compito ma penso che tu possa usare
margin: 0 auto;
per centrare i tuoi div
Utilizza il posizionamento relativo sul genitore e assegna allo stesso elemento la proprietà:
margin: 0 auto;
Il genitore è ora posizionato e dovresti essere in grado di impostare elementi al suo interno.
Esempio:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
Il modo più semplice:
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
Questo lo porterà esattamente nel mezzo, indipendentemente dalle dimensioni.
Spero che ti aiuti!
Vedi violino: http://jsfiddle.net/kfPC6/
Non vuoi un posizionamento relativo se 0,0 sarà relativo a un div?
La proprietà text-align: center; fa ciò che <center> era abituata ed è di gran lunga superiore.
L'unica cosa è che è un po 'più complesso da usare. Una volta capito, ti chiederai perché hai avuto così tanti problemi prima!
È necessario utilizzarlo in coordinazione con le proprietà di altri elementi nella pagina. Questo è il problema che gli sviluppatori / designer hanno con CSS e le più recenti tecnologie HTML. Ci dà un modo potente per presentare i nostri elementi di pagina ma lo rende molto più complesso e rigoroso.
La risposta di Mike Robinson risolve sicuramente il problema che stai riscontrando qui ed è un ottimo esempio. Ma ...
Non credo che nessuna risposta ti mostrerà come usare text-align correttamente per tutti i casi che incontrerai, ma prova a esaminare come il posizionamento nei CSS funziona in modo più approfondito.
