I formati orizzontali e verticali consentono di stendere una pagina Web nel browser dell'utente. Il formato di allineamento verticale è la posizione di un'immagine o un testo all'interno di un contenitore. È possibile allineare il contenuto nella parte superiore, centrale o inferiore del contenitore, a seconda del layout che si adatta il vostro disegno di pagina Web.

Significato

Tableless design comprende la maggior parte dei layout di pagina Web. Ciò significa che la maggior parte degli sviluppatori bastone di classi CSS per preparare immagini e testo su una pagina. In precedenza, tabelle con celle, righe e colonne controllate come una pagina Web visualizzata. Tuttavia, con tableless design, il layout è contenuto all'interno di un contenitore "div". Un div contenitore consente di inserire sezioni della tua pagina in diverse aree del codice HTML, ed è possibile controllare diverse sezioni della pagina senza influire sulle altre aree.

Formato verticale

La proprietà "valign" è l'istruzione di tag inline HTML che controlla il posizionamento verticale di un oggetto contenuto. Per esempio, se si dispone di un div contenitore che è di 50 pixel in altezza, impostazione "valign" luoghi "di mezzo" il contenuto 25 pixel giù dalla parte superiore del contenitore. Anche se si sposta il div contenitore in una posizione diversa, il contenuto rimane comunque centrato verticalmente.

Classi CSS

Fogli di stile CSS consentono di impostare Progettazione classi, quindi è possibile collegare gli elementi HTML a una classe senza digitare manualmente stile di ciascun elemento. Il seguente è un esempio di una classe CSS che allinea gli elementi in verticale:

div # {

Vertical-align: middle;
}

Questa classe consente di allineare verticalmente contenuto nel mezzo di un div denominato "div".

Considerazioni

Design per CSS prende tempo e la pratica. Se l'allineamento è spento per un div, si può rovinare il design per il resto della pagina. È necessario aprire la pagina HTML con le classi CSS associate in ogni comune browser come Firefox, Chrome e Internet Explorer per garantire che il layout funziona correttamente nei browser dei tuoi lettori.