Il posizionamento di elementi in una pagina Web è essenziale per il suo design complessivo. Sebbene ci siano altri modi per influenzare il layout, come ad esempio l'uso di tabelle (che non consigliamo), la cosa migliore è usare i CSS.
Di seguito, daremo un'occhiata a come utilizzare una semplice proprietà in linea di stile CSS per allineare immagini, tabelle, paragrafi e altro.
Nota: Questi stessi metodi possono essere utilizzati anche su fogli di stile esterni, ma poiché questi si applicano a singoli articoli e probabilmente devono rimanere in questo modo, è meglio usare lo stile in linea come quello menzionato di seguito.
Allinea i paragrafi di testo
Il tag del paragrafo è il primo punto da cui partire per creare la tua pagina web. I tag di apertura e di chiusura hanno questo aspetto:
L'allineamento predefinito del testo in un paragrafo è sul lato sinistro della pagina, ma puoi anche 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 floated.
Per ottenere l'effetto migliore con un paragrafo, è meglio impostare una larghezza sul paragrafo più piccola dell'elemento contenitore (genitore).
Allinea il testo all'interno di paragrafi
Probabilmente, l'allineamento più interessante per il testo del paragrafo è "justify", che indica al browser di visualizzare il testo allineato, in sostanza, a entrambi i lati destro e sinistro della finestra.
Per giustificare il testo in un paragrafo, si utilizzerà la proprietà text-align.
Puoi anche allineare tutto il testo all'interno di un paragrafo a destra oa sinistra (predefinito), usando la proprietà text-align.
La proprietà text-align allineerà il testo all'interno dell'elemento. Tecnicamente, non dovrebbe allineare le immagini contenute nel paragrafo o in un altro elemento, ma la maggior parte dei browser considera le immagini come inline per questa proprietà.
Allineare le immagini
Usando 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à float style nel tag immagine posizionerà la tua immagine sulla pagina e dirà 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, io uso la proprietà clear:
Allineare più di paragrafi
Tuttavia, cosa succede se si desidera allineare più di un semplice paragrafo o un'immagine? Potresti 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 sarà allineato al modo in cui ti piacerebbe.
Tieni presente che gli allineamenti aggiunti a paragrafi o immagini all'interno della divisione saranno rispettati, ignorando il tag.
