La col·locació d'elements en una pàgina web és essencial per al seu disseny global. Encara que hi hagi altres maneres d'influir en el disseny, com ara utilitzar taules ( que no recomanem ), el millor és utilitzar CSS .
A continuació, veurem com utilitzar una senzilla propietat en estil CSS en línia per alinear imatges, taules, paràgrafs i molt més.
Nota: Aquests mateixos mètodes es poden utilitzar també en fulls d'estil externs, però ja que aquests s'apliquen a elements individuals i, probablement, necessiten mantenir-se així, és millor utilitzar un estil en línia com el que s'esmenta a continuació.
Alinea els paràgrafs del text
L'etiqueta de paràgraf és el primer lloc per començar a configurar la vostra pàgina web. Les etiquetes d'obertura i tancament són així:
L'alineació predeterminada del text d'un paràgraf es troba al costat esquerre de la pàgina, però també podeu alinear els paràgrafs a la dreta i al centre.
L'ús de la propietat flotant permet ajustar els paràgrafs a la dreta o a l'esquerra de l'element primari. Qualsevol altre element dins d'aquest element primari fluirà al voltant de l'element flotant.
Per obtenir el millor efecte amb un paràgraf, el millor és establir un ample en el paràgraf que sigui més petit que l'element contenidor (pare).
Alinea els paràgrafs dins del text
Probablement, l'alineació més interessant del text del paràgraf és "justificar", que indica al navegador que mostri el text alineat, essencialment, tant a la part dreta com a l'esquerra de la finestra.
Per justificar el text d'un paràgraf, s'utilitzarà la propietat alinear text.
També podeu alinear tot el text dins d'un paràgraf al costat dret o l'esquerra (per defecte), utilitzant la propietat alinear text.
La propietat alinear text alinearà el text dins de l'element. Tècnicament, no se suposa que alineeu les imatges que es troben dins del paràgraf o un altre element, però la majoria dels navegadors tracten imatges com a inline d'aquesta propietat.
Alineació de les imatges
Si utilitzeu la propietat flotant en una etiqueta d'imatge, podeu definir la ubicació de les imatges a la pàgina i com s'introduirà el text al voltant d'ells.
De la mateixa manera que els paràgrafs anteriors, la propietat d'estil flotant de l'etiqueta d'imatge posicionarà la vostra imatge a la pàgina i informa al navegador com fluxar text i altres elements al voltant d'aquesta imatge.
El text que segueixi l'etiqueta d'imatge anterior fluirà al voltant de la imatge a la dreta a mesura que la imatge es mostra a l'esquerra de la pantalla.
Si vull que el text deixi d'envoltar-se per la imatge, ús la propietat clara:
style = "clear: left">
Alineant més paràgrafs
No obstant això, què passa si voleu alinear més que només un paràgraf o una imatge? Podria simplement posar una propietat d'estil en cada paràgraf, però hi ha una etiqueta que podeu utilitzar que sigui més eficaç:
Simplement envolteu el text i les imatges (incloses les etiquetes HTML ) amb l'etiqueta i la propietat d'estil (flotant o alineació de text) i tot el que estigui en aquesta divisió s'alinejarà com us agradaria.
Tingueu en compte que s'incorporaran alineacions afegides a paràgrafs o imatges dins de la divisió, que anul·len l'etiqueta.