Un elemento utilizzando il posizionamento assoluto di centraggio può fare un sito web look più professionale e snella. L'elemento verrà sempre visualizzata al centro della pagina e non può essere spostato dai vari browser Web. La tecnica viene fornito con alcune stranezze. Scendendo esattamente il codice e la visualizzazione di ciò che si desidera venga visualizzato nella pagina dovrebbe rendere il processo semplice e di successo.
Istruzioni
Visualizzare il tuo sito e scrivere su carta
1
Disegno il tuo design rende più facile attuazione.
Disegnare il tuo sito su carta, piuttosto che mantenerlo tutto nella tua testa, prima di iniziare il codice. Esso consente di visualizzare i passaggi. Il codice sarà più sensato se si può pensare attraverso su carta.
2
Aprire il foglio di stile e digitare quanto segue per l'elemento che si desidera posizionare in mezzo:
nome dell'elemento da centrare {
position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
}
Impostazione sul lato sinistro al "50%" renderà l'elemento iniziare al punto morto della pagina, perché esso è partendo dal punto a metà strada (o 50 per cento rispetto all'asse orizzontale sinistro).
3
Salvare il nuovo foglio di stile e caricarlo sul tuo sito Web tramite il cPanel (pannello di controllo). Anteprima della pagina e vedere se l'elemento è posizionato correttamente.
Posizionamento e centraggio più elementi
4
Assegnare uno z-Index per gli elementi di rango che appare sopra gli altri, se avete intenzione di impilare più di un elemento o se si dispone di un blocco di testo che si desidera venga visualizzato sulla parte superiore dell'elemento posizionato.
5
Impostare l'elemento di -1 se si desidera che appaia sotto un blocco di testo:
nome dell'elemento da centrare {
position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: -1;
}
6
Elementi con posizionamento assoluto possono essere impilati come blocchi.
Impilare più elementi nel centro fornendo il z-indice destro a ciascuno. Ad esempio, se hai tre immagini che si desidera impilare uno sopra l'altro, dal più piccolo al più grande, effettuare le seguenti operazioni:
centro {piccolo elemento
position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 1;
}
Centro centrale (elemento) {
position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index:2;
}
centro grande (elemento) {
position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 3;
}