Contenuto
- Allinea i paragrafi di testo
- Allinea il testo all'interno dei paragrafi
- Allineamento delle immagini
- Allineare più dei paragrafi
Il posizionamento di elementi su una pagina Web è essenziale per il suo design complessivo. Sebbene ci siano altri modi per influenzare il layout, come usare le tabelle (che non consigliamo), la cosa migliore è usare i CSS.
Di seguito, daremo un'occhiata a come utilizzare una semplice proprietà in linea in stile CSS per allineare immagini, tabelle, paragrafi e altro.
Questi stessi metodi possono essere utilizzati anche su fogli di stile esterni, ma poiché si applicano a singoli elementi e probabilmente devono rimanere in quel modo, è meglio usare uno stile in linea come quello che viene menzionato di seguito.
Allinea i paragrafi di testo
Il tag di paragrafo è il primo punto da cui iniziare a creare la tua pagina web. I tag di apertura e chiusura si presentano così:
L'allineamento predefinito del testo in un paragrafo è sul lato sinistro della pagina, ma è anche possibile allineare i paragrafi a destra e al centro.
L'uso della proprietà float consente di allineare i paragrafi a destra o a sinistra dell'elemento genitore. Qualsiasi altro elemento all'interno di quell'elemento genitore scorrerà attorno all'elemento mobile.
Per ottenere l'effetto migliore con un paragrafo, è meglio impostare una larghezza sul paragrafo più piccola dell'elemento container (parent).
Allinea il testo all'interno dei paragrafi
Probabilmente, l'allineamento più interessante per il testo del paragrafo è "giustificare", che dice al browser di visualizzare il testo allineato, essenzialmente, sia ai lati destro che sinistro della finestra.
Per giustificare il testo in un paragrafo, utilizzare la proprietà text-align.
Puoi anche allineare tutto il testo all'interno di un paragrafo sul lato destro o sinistro (impostazione predefinita), usando la proprietà text-align.
La proprietà text-align allinea il testo all'interno dell'elemento. Tecnicamente, non è necessario allineare le immagini contenute nel paragrafo o in altri elementi, ma la maggior parte dei browser considera le immagini come in linea per questa proprietà.
Allineamento delle immagini
Utilizzando la proprietà float su un tag immagine è possibile definire il posizionamento delle immagini sulla pagina e il modo in cui il testo le avvolgerà.
Proprio come i paragrafi precedenti, la proprietà di stile float nel tag immagine posizionerà la tua immagine sulla pagina e dice al browser come far scorrere il testo e altri elementi intorno a quell'immagine.
Il testo che segue il tag immagine sopra scorrerà intorno all'immagine a destra mentre l'immagine viene visualizzata a sinistra dello schermo.
Se voglio che il testo smetta di avvolgere l'immagine, utilizzo la proprietà clear:
Allineare più dei paragrafi
Tuttavia, cosa succede se si desidera allineare più di un semplice paragrafo o un'immagine? Puoi semplicemente mettere una proprietà di stile in ogni paragrafo, ma c'è un tag che puoi usare che è più efficace:
Basta circondare il testo e le immagini (compresi i tag HTML) con il tag e la proprietà style (float o text-align) e tutto in quella divisione verrà allineato come desideri.
Tieni presente che gli allineamenti aggiunti a paragrafi o immagini all'interno della divisione verranno rispettati, ignorando il tag.
