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 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'ha d'establir també en percentatge.

Exemple

En el cas de les imatges, s'aplica text-align="center" al continent, que, encara que no sigui obligatori en Transitional, es bo d'acostumar-se a fer servir.

 

Marge automàtic

Sovint l'amplada d'un element queda definida, implícitament o expícitament, en píxels, i en canvi la del continent s'ha definit en percentatge (o no s'ha definit, que és tant com definir-la en 100%).

En aquest cas no hi ha manera de calcular numèricament el marge. Hi ha un recurs que duu a terme automàticament el càlcul, sense necessitat d'explicitar les mides de l'element contingut:

Exemple

Alguns navegadors antics (vg. l'Explorer 5) no reconeixen el procediment esmentat. Tampoc no serà reconegut si falla l'especificació DTD del document. Una alternativa ad hoc consisteix a especificar body { text-align: center } i desfer després aquesta especificació sempre que convingui:

Exemple

 

Formes alternatives de centrar encapçalaments, imatges i taules

En les versions Transitional es pot fer servir l'atribut

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

El W3C accepta l'ús d'aquest atribut en els elements de les taules i el desaconsella en els altres casos. Però la dificultat dels altres procediments fa que a la pràctica també s'admeti a DIV.

Exemple

També es fa servir encara

 

Ú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 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

 

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 qyue a la dreta es forma un dentat corresponent a la desigual longitud de les línies successives. Aquesyta 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