17. Centrar elements i alinear text

 

Índex

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

Aquest procediment és d'aplicació directa als elements contenidors de text (P, BLOCKQUOTE, TABLE...).

Exemple

En el cas de les imatge cal aconseguir, a més, que es comportin com un bloc de contingut, cosa que s'aconsegueix amb l'especificació

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 tota l'amplada l'espai disponible en el contenidor, i el mínim d'alçada possible. Més específicament, cada línia de text 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 o un altre element es troba dins un element contenidor de mides prefixades, es planteja el problema de la posició vertical que el primer ocupa dins el segon. En absència d'especificacions, queda arranat a la part superior, llevat de l'element <td>, en què el text queda centrat verticalment.

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

Exemple

Un procediment alternatiu, útil només en pàgines estàtiques, és fixar un padding-top que sigui justament la meitat de la diferència entre la mida vertical de la imatge i la de l'element que la conté.