Nello sviluppo web, è fondamentale creare correttamente il layout dell'elemento. Tuttavia, molte proprietà CSS, come CSS3 Flexible Box, sono utili per regolare il layout delle pagine Web e degli elementi HTML. Flexible Box viene utilizzato per organizzare pagine Web e applicazioni in modo ricorsivo. Questa modalità Flexbox aiuta a creare layout per pagine Web e applicazioni complesse.
Questo post ti guiderà su come centrare verticalmente un elemento div per tutti i browser utilizzando i CSS.
Come allineare l'elemento div usando i CSS?
L'elemento div può essere allineato verticalmente utilizzando la proprietà display ' flettere ' insieme al CSS ' align-elementi ” proprietà e “ giustificare il contenuto ' proprietà. La proprietà 'align-items' allinea l'elemento verticalmente e la proprietà 'justify-content' allinea il contenuto orizzontalmente.
Esempio: come centrare verticalmente un elemento div con i CSS?
In HTML, per prima cosa aggiungi un ' Ecco il codice HTML: In CSS, specificheremo diverse proprietà di stile al div. Classe 'contenuto principale' di stile Le seguenti proprietà CSS sono definite nella sezione ' contenuto principale ' classe: Dall'output, puoi osservare che il contenuto dell'elemento div non è al centro: Andiamo avanti per applicare le proprietà CSS che aiutano a centrare il ' Ecco la descrizione: Produzione Hai imparato come centrare verticalmente un elemento div per tutti i browser utilizzando i CSS. Per centrare verticalmente un elemento div, il CSS ' Schermo ” proprietà è utilizzata con il “ flettere ' valore. Questo valore rende il contenitore
< imm src = '/images/laptop-notepad.jpg' Tutto quanto = 'Laptop con blocco note e penna' larghezza = '300' >
< p > Il laptop è anche un computer portatile noto come un computer portatile. p >
div >
altezza: cinquanta % ;
colore di sfondo: #46C2CB;
dimensione carattere: 24px;
imbottitura: 10px;
}
align-items: centro;
Conclusione