17. Centrar elements i alinear text

 

Índex | Tema 16 | Tema 18

Centrar un element

En el cas més general, podem centrar un element a l'interior d'un altre fent que els marges superior i esquerre de l'element interior siguin la meitat de la diferència entre les mides de l'interior i de l'exterior:

Exemple

Sovint l'element interior queda definit en percentatge; en aquests casos, els marges s'han d'establir també en percentatge.

Exemple

 

Marge automàtic

Haver de determinar i especificar les dimensions de tots els elements i fer els càlculs per als marges pot ésser farragós, i en alguns casos impossible. Hi ha un recurs que duu a terme automàticament el càlcul, sense necessitat d'explicitar les mides de l'element contingut:

L'existència de pantalles d'ordinador de proporcions diferents presenta un dilema:

L'ús de 0px auto resol el problema. Podem donar una amplada definida a BODY - o preferiblement a un DIV que englobi tot el contingut - i aplicar-hi l'especificació margin: 0px auto, i així tenim resolt el problema. El segon procediment és el que hem fet servir pràcticament a tots els temes i a la immensa majoria dels exemples.

Exemple

Encara que el continent i el contingut tinguin mides ben determinades, l'ús de margin: 0px auto estalvia càlculs. I a més és imprescindible en pàgines dinàmiques que puguin tenir continguts de mides diferents.

Exemple

En el cas de les taules, ja sabem que aquestes, en absència de'especificació, tenen una amplada variable: la mínima compatible amb el contingut. També hi podem aplicar el mateix recurs:

Exemple

Cal notar que alguns navegadors antics (vg. l'Explorer 5) no reconeixen el procediment esmentat. Tampoc no serà reconegut si la construcció del HEAD no s'ajusta totalment a les especificacions. Resoldre el segon problema és a la mà de qui crea el document, però no pas el primer. En aquests casos no hi ha més remei que fer servir els procediments numèrics abans indicats.

 

Formes alternatives de centrar encapçalaments, imatges i taules

Històricament s'han fet servir recursos no admesos a HTML5:

en què el valor pot ésser left, right i center.

Un altre recurs obsolet des de fa molt més temps és

 

Ús de les taules per a fixar la posició i l'amplada d'elements

Una manera de fixar la posició i l'amplada d'un element consisteix a fer servir una taula de vores invisibles. Moltes vegades es fan servir taules dins de cel·les d'una taula més amplia, i amb aquest joc es pot controlar molt bé la posició i les dimensions dels diversos fragments de text.

 

Alinear horitzontalment un text

En la presentació d'un text, aquest tendeix a ocupar en amplada tot l'espai disponible; cada línia té la màxima amplada compatible amb la integritat de la darrera paraula que hi cap sencera. En resulta una alineació del text per l'esquerra, mentre que a la dreta es forma un dentat corresponent a la desigual longitud de les línies successives. Aquesta forma de presentació bàsica pot ésser modificada; en resulten quatre possibles formes de distribució del text, anomanades alineacions horitzontals:

Establim l'alineació horitzontal amb l'especificació

on alineació pot adoptar els valors left, right, center i justify.

Exemple

 

Alinear verticalment un text

Si un text es troba dins un element de mides prefixades, es planteja el problema de la posició que ocupa dins aquest. En absència d'especificacions, el text queda arranat a la part superior, llevat de l'element <td>, en què el text queda centrat verticalment.

Tot i la incorrecció palesa del terme, ha quedat consagrada l'expressió alinear verticalment un text com sinònim de fixar-ne la posició vertical.

L'alineació vertical es fixa amb l'atribut vertical-align, que pot adoptar els valors top, middle i bottom:

Exemple