Se supone que todo debería centrarse usando align:center pero no es así cada elemento tiene formas distintas de centrarse, así que veamos:
Centrar un DIV
Tanto para centrar un div (capa) dentro de otro como para centrarlo en el body no se requiere usar align(es más no existe esa propiedad), basta que le asignes un margen automático
1 2 3 | #micapa { margin:auto; } |
Centrar un texto
Para centrar un texto dentro de una etiqueta p, table, div,etc si funciona el text-align
1 2 3 4 5 6 | p { text-align:center; } #midiv { text-align:center; } |
Centrar una imagen
Para centrar una imagen también se puede utilizar el text align o la etiqueta center pero sobre el objeto que la contenga, si a una imagen le pones text align center no se centrará pero si esta dentro de un div a este debes ponerle la alineación
1 2 3 | #midivcontenedor { text-align:center; } |
La otra opción es:
Centrar una tabla
No puedes centrar una tabla usando CSS, si usas text-align center con una tabla se centrará el texto contenido pero no la tabla, debes usar align=»center» sobre la tabla, además si reseteaste el CSS con margin:0px tampoco funcionará, deberás darle un margen automático
1 2 3 4 5 |
Es margin auto solo hace falta si reseteaste los margenes para todos los elementos (eso se acostumbra por compatibilidad entre browsers, ya postearé algo sobre la utilidad de eso)
Si deseas centrar texto dentro de la tabla, es posible aplicarlo sólo a ciertos TD como titulos o resultados numericos usando text-align:center
Centrar una película flash
Para esto puedes usar la etiqueta center, otra opción es colocarla dentro de un div pero no respetará ningún estilo al menos que la película tenga asignada la propiedad wmode=»transparent» igualmente no respetará la propiedad z-index y se superpondrá a todo objeto a menos que este con wmode=»transparent».
y los elementos dentro de un formulario??
Puedes usar en el CSS del formulario text-align:center; aunque mejor alinealos siguiendo el tutorial «Dar formato a formularios» http://www.miguelmanchego.com/2009/formato-formulario-css-hoja-estilo
Yo tengo una duda: ¿y esos centrados son inmunes a las distintas resoluciones de pantalla? Y otra cosa: ¿cómo se centra un menú horizontal?
Si, el margin auto centra DIV en toda resolucion, lo de como centrar un menu depende de que este hecho, si es texto usas text-align:center si es ul y li o div asignando un width y margin:auto
Gracias por responder. Bueno, la verdad es que preguntaba esas dos cosas porque en unos ensayos que estoy haciendo, un menú horizontal aparece descolocado en determinadas resoluciones, quedando incluso el último enlace situado bajo el primero.
De todas formas, según tengo entendido, para asegurar el centrado (o una posición determinada) de cualquier elemento, es preferible que éste se encuentre dentro de un div contenedor general. Los elementos situados fuera de dicho contenedor pueden ser más díscolos de cara a cambios de navegador o resolución. (Por supuesto, corríjaseme si estoy equivocado).
Un saludo.
no sera de mucho aporte mi post, pero keria agradecer, soy principiante en estoy me ayudo mucho tu articulo, gracias.
que bueno que posteaste esto, me sirvio d mucho en mi blog. gracias
Soy novata en css pero me pregunto si sería posible realizar un grupo de opciones en el interior de un combo.
Gracias de antemano.
Se puede hacer algo similar usando esto
2
3
4
5
<option value="1">Tutores.org</option>
<option value="2">Aspin.com</option>
<option value="3">free-asp.com</option>
</optgroup>