Di solito le cose si trovano al centro dei siti web, giusto? Mettere le cose in primo piano \u00e8 il modo migliore per attirare l’attenzione, quindi le persone, logicamente, cercano di farlo la maggior parte delle volte. Quindi mettere gli elementi al centro dovrebbe essere la cosa pi\u00f9 semplice e ottimizzata da fare nello sviluppo web, giusto? <\/p>\n\n
Giusto?<\/p>\n\n
SBAGLIATO.<\/p>\n\n
Ci sono cos\u00ec tanti modi per farlo, cos\u00ec tante opzioni eppure, in qualche modo, per qualche maledizione, ancora non funziona. \u00c8 il manifesto delle lamentele sui CSS, e per una buona ragione. Ore e ore di ricerche su “come centrare i CSS”, “come centrare un div”, “come centrare un div al centro della pagina”, “come centrare un testo in html”, “centrare un div orizzontalmente e verticalmente” e l’elenco potrebbe continuare. <\/p>\n\n
Niente dovrebbe essere cos\u00ec complicato.<\/p>\n\n
Forse \u00e8 cos\u00ec a causa dei vari e spesso confusi metodi (alcuni migliori, altri peggiori) che si trovano su internet. E forse le persone hanno bisogno di una guida quando si tratta di questo argomento. <\/p>\n\n
Ecco quindi i metodi migliori per centrare gli oggetti nei CSS.<\/p>\n\n
<\/p>\n\n
1. La soluzione di base. Questa soluzione funziona per gli elementi inline, inline-block, inline-table e inline-flex. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 2. Per centrare i blocchi<\/strong><\/p>\n\n <\/p>\n\n Oppure<\/p>\n\n <\/p>\n\n <\/p>\n\n 3. Quando si parla di testo, un trucco da tenere a mente per la centratura \u00e8 l’altezza della linea. Questo funziona meglio per il testo a riga singola. L’altezza della riga deve essere uguale all’altezza del contenitore. In questo modo: <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n Ma se si tratta di pi\u00f9 righe, basta usare:<\/p>\n\n <\/p>\n\n <\/p>\n\n 4. Centrare le immagini \u00e8 un po’ pi\u00f9 complicato, quindi ci sono diverse soluzioni. La prima \u00e8 <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 5. Questo \u00e8 ottimo anche per le immagini<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 6. Un po’ pi\u00f9 complicato, ma comunque buono per i modali.<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 7. La centratura va anche in verticale, non solo in orizzontale. \u00c8 qui che possiamo vedere una variet\u00e0 di opzioni e dove entra in gioco il salvatore chiamato flex display. <\/p>\n\n <\/p>\n\n Ma tieni presente che devi impostare la direzione del flex. Quindi utilizza <\/p>\n\n <\/p>\n\n Per l’allineamento orizzontale O<\/p>\n\n <\/p>\n\n Per l’allineamento verticale<\/p>\n\n <\/p>\n\n 8. Sempre a proposito dell’utilizzo di flex, possiamo anche utilizzare combinazioni come<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 9. Naturalmente, la posizione assoluta pu\u00f2 aiutarti a centrare gli oggetti sia in orizzontale che in verticale.<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 10. Una delle soluzioni pi\u00f9 complicate \u00e8 la visualizzazione dell’elemento come tabella. Funziona ancora a meraviglia, quindi non criticarla finch\u00e9 non la provi. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 11. Vuoi usare la griglia? In questo caso le cose sono molto pi\u00f9 semplici. Hai solo bisogno di un wrapper con <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n E poi aggiungi questo al tuo elemento<\/p>\n\n <\/p>\n\n <\/p>\n\n Ce ne siamo persi qualcuno? Oppure hai altre soluzioni che non sono state elencate? <\/strong><\/p>\n\n <\/p>\n\np { text-align: center }<\/code><\/p>\n\np {p {p {p {img {img {section {div {flex-direction:row;<\/code><\/p>\n\nflex-direction:column;<\/code><\/p>\n\ndiv {div {div {body, html {div {