Come fare centratura verticale con i CSS

April 13

Come fare centratura verticale con i CSS


Un modo per evidenziare un elemento è centrare verticalmente sulla pagina. I fogli di stile ha la proprietà vertical-align con il valore medio (vertical-align: middle) per aiutare a realizzare questo compito. I fogli di stile CSS sono documenti che consentono agli utenti di applicare le impostazioni uniformi per più pagine web o sezioni di pagina durante la modifica gli elementi in una posizione centrale. Purtroppo, Internet Explorer, un comune browser che si deve prendere in considerazione durante la progettazione di una pagina web, non supporta completamente la proprietà align verticale. Attraverso una combinazione di CSS e HTML, è possibile centrare verticalmente gli elementi anche in Internet Explorer.

istruzione

1 Digitare l'elemento che si desidera centrare dentro i tag div <div> </ div> nel corpo <body> </ body> del documento HTML. tag div definiscono sezioni nei documenti HTML. Nell'esempio che segue, l'elemento è un paragrafo <p> </ p>, ma può essere quasi qualsiasi elemento, tra cui un'immagine o un video.
<Div class = "box1">
<P> Questo è un paragrafo centrato verticalmente, che è un tipo di elemento. </ P>
</ Div>

2 Digitare le impostazioni per il contenitore div nel foglio di stile <style> </ style> sezione della testata <head> </ head>. I commenti sono racchiusi in tag di commento /

/. Informazioni racchiuso nel tag di commento è solo per le informazioni. Il tuo browser li ignora.
<Style type = "text / css">
<! -
div.box1 / Identifica la posizione in cui le impostazioni da seguire applicare. L'elemento div con la classe "box1." /
{
altezza: 500px; / Rende la casella div alto 500 pixel. /
display: table-cell; / Indica al browser di trattare il div contenitore come una cella di una tabella. /
vertical-align: middle; / Indica al browser di centrare verticalmente l'elemento (punto). /
sfondo: rosso; / Per scopi di visualizzazione in modo da poter vedere che il paragrafo è centrato nel contenitore div. /
}
->
</ Style>

3 Utilizzare la proprietà VAlign in una tabella, in combinazione con i CSS per allineare un elemento verticale in Internet Explorer. La proprietà vertical-align con il valore medio non è supportata in Internet Explorer. Includere la proprietà CSS vertical-align per i browser che riconoscono questa proprietà. Questo esempio illustra anche un foglio di stile in linea.
<Html>
<Head>
<Title> Tabella VA </ title>
</ Head>
<Body>
<Table style = "height: 500px; border: 0px solido abbronzatura; padding: 0px; sfondo: abbronzatura; vertical-align: middle">
<Tr>
<Td valign = middle> allineati verticalmente in tutti i browser. </ Td>
</ Tr>
</ Table>
</ Body>
</ Html>

Consigli e avvertenze

  • Copia e incolla il codice nel documento HTML e modificarlo in base alle proprie preferenze per la creazione di elementi allineati verticalmente con i CSS nel documento HTML.