Voglio centrare una div destra nel mezzo della pagina, ho provato top:30%, ma quando la finestra viene ridimensionata dall'allineamento.center a div box nel mezzo della pagina utilizzando css
<div id=cent></div>
Grazie Jean
<div id="content"
style="text-align: center;
vertical-align: middle;
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-top: 25%;
margin-bottom: 25%;">
hi
</div>
Questo ha funzionato per me ...
Edit: Questo allineerà l'intero div ... a prescindere dalle dimensioni del div o la pagina. .. Supponendo che questo ID sia l'unico div in tutta la pagina ...
Ho solo bisogno di allineare il div non il testo – X10nD
Se si conosce l'altezza/larghezza di quel div (ad esempio, sarà 100 x X 200 px), allora è possibile farlo in questo modo:
#cent {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
UPDATE: un'altra opzione: vedi http://www.w3.org/Style/Examples/007/center (centratura verticale)
Aggiunta di note al collegamento naivists' (W3C sito punte): display:table-cell non funziona con height:100%. Pertanto, se si desidera centrare verticalmente un elemento, di cui non si conosce l'altezza, su una pagina, è necessario inserirlo in un contenitore con display:table e height:100% e un altro contenitore con display:table-cell e vertical-align:middle.
Inoltre, se si desidera centrarlo orizzontalmente, è necessario specificare width:100% sul corpo, sul contenitore esterno e dare text-align:center al contenitore interno. Il contenuto dovrebbe avere display:inline-block e per ripristinare l'allineamento, text-align:left.
In ultima analisi, diventa come segue:
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
Non posso garantire che funzionerà sul browser legacy (IE6/7). Funzionerà su IE8 a condizione che funzioni sugli standard IE8 (sì, questo ti farà impazzire. Grazie, MS!), E devi dare <html> e <body> il height:100%.
Ecco come:
#cent
{
margin-left:50px;
margin-right:50px;
}
Ora il vostro div sta per essere 50px da sinistra e destra e centrato in qualunque contenitore lo avete in
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
HTML:.
<div id="box"></div>
CSS:
#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*you only need this part to center*/
}
Whatch fuori dalle virgolette o doppie virgolette intorno al "box" di identificazione, ne hai bisogno.
Questo tipo di domanda richiede un codice di esempio se qualcuno cerca di rispondere ... Senza alcuna idea su come il div è posizionato all'interno dei suoi elementi genitori e fratelli, non c'è modo di capire il tuo problema .. evviva ..! – SpikETidE
È solo un semplice div no genitore o figlio – X10nD