JMiur [E]

Una pregunta recurrente: ¿cómo centrar algo?

En realidad, es bastante sencillo pero debemos tener claro un concepto: no todos los elementos (etiquetas) de una página web pueden centrarse; sólo aquellos llamados "bloques".

Podemos decir que hay dos tipos de etiquetas, las que por defecto son bloques y las que por defecto no son bloques (inline). Entre las primeras están P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, BLOCKQUOTE, FORM, TABLE, etc.

¿Que es eso de bloques?

Los bloques tienen una particularidad, poseen un ancho equivalente al total del área donde se encuentran y crean un salto de línea automático; es decir, ocupan todo el ancho y se separan del elemento anterior y del elemento siguiente.

DIV
DIV
DIV

Los elementos inline se muestran uno al lado del otro y, si el contenido supera el ancho disponible, continuan "debajo":

DIV
SPAN-1SPAN-2SPAN-3SPAN-4SPAN-5
DIV

Todo lo que agregamos en una página mediante etiquetas HTML es un rectángulo que tiene un contendio y un borde (border) que puede estar visible o no. Entre ese borde y el contenido hay un área de relleno (padding) y entre ese borde y otro elemento hay un área de margen (margin) que los separa.

Vamos a ver un código común; una imagen en un DIV al que le damos un tamaño y le ponemos un borde. Como no la alineamos, aparecerá sobre la izquierda:
<div style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


La primera etiqueta que aprendemos y las más evidente es <center> </center>
<center>
<div style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>
</center>

No está mal pero es una etiqueta depreciada, se recomienda no usarla pero, es una alternativa. Como ven, centra el DIV y el contenido. Si quisiéramos centrar sólo el DIV pero no el contenido, nos veríamos en problemas.

La segunda posibilidad que nos enseñanban era usar el atributo ALIGN que tampoco está recomendado y que no resuelve el problema ya que centrará el contenido pero no el DIV:
<div align="center" style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


La forma más segura de centrar algo es utilizando las propiedades CSS y hay que entender su significado. La propiedad básica es text-align: center; y su nombre puede llevar a confusión; lo que centra, es el contenido de un bloque, no sólo textos, cualquier cosa:
<div style="text-align: center; border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


Como se ve, text-align: center; es el equivalente a align="center".

¿Qué pasaría si colocamos ese estilo en la imagen? Nada, no produciría ningún efecto porque la etiqueta IMG es de tipo inline; lo mismo ocurriría si usáramos SPAN o A:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

¿Y cómo centramos el bloque?

Para eso, usamos la propiedad margin al que le ponemos un valor especial: auto pero, siempre y cuando esté definda tambien la propiedad width ya que si no lo está, el ancho por defecto es todo el ancho disponible.

Ahora sí, podemos centrar el bloque y el contenido de manera independiente:
<div style="margin: 0 auto; text-align: right; border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


Todos los elementos HTML tienen propiedades CSS por defecto pero pueden cambiarse así que, un elemento de bloque puede ser transformado en un elemento inline y viceversa; para eso, hay una propiedad llamada display:

display: inline; /* elemento inline */
display: block; /* elemento bloque */

Por ejemplo, podríamos transformar la imagen en un bloque:
<img style="border: 1px solid red; margin: 0pt auto; padding: 0 125px; display: block;" src="laImagen" />

28 comentarios:

Gem@  

Algo muy básico e importante :)

Responder
JMiur  

Saludos, Gem@. Sí; es básico :D

Responder
Claudio - Poca Tinta  

Buenas recomendaciones, voy a ser un poco mas ordenado.

Slds

Responder
LacraX  

Jejeje , muy bueno. Siempre uso <center><center/>. Lo voy a tener en cuenta :)

Responder
LacraX  

Perdon </center>

Responder
DEXTER  

esta interesante

Responder
sandra  

básico pero muy bien explicado. y no está mal recordarlo y tenerlo a mano

Responder
JMiur  

Saludos, Sandra. Gracias por el comentario.

Responder
ANDRES ARMAS  

Hola JMiur, tengo un menú en el blog, pero se decentra en un monitor de 17 pulgadas, en el de 19 pulgadas no hay problema, no puedo centrarlo para que se vea bien en cualquier tamaño de monitor, podrías ayudarme, te lo agradeceria muchisimo, ya que estoy lidiando con esto mucho tiempo, un cordial saludo.

Responder
JMiur  

Tal como está ahora, lo mejor es que uses las propiedades de este blog:
http://selectprint.blogspot.com/
en este otro:
http://polopublicitario.blogspot.com/
ya que allí se ve centrado (es por display: table;)

Otra posibilidad es colocar el menú dentro de un DIV y que este tenga la imagen de fondo y margin:0 auto; dimensionado UL con width.

Usar padding para posiiconar UL no es buena idea y es lo que hace que se ubique a cierta distancia que no se verá igual en todas las resoluciones.

Responder
ANDRES ARMAS  

JMiur, no entiendo mucho de códigos, podrías indicarme que codigos tengo que borrar y que aumentar, el blog que uso es el primero el segundo es el borrador, te mando un saludo cordial.

Responder
JMiur  

Lo que parece funcionar bien entonces, es el blog de prubas así que busca esta parte:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_four */
.preload4 { ................
.menu4 { ................
.menu4 li {................
.menu4 li a {................
.menu4 li.current a {................
.menu4 li.current a b {................
.menu4 li a:hover {................
.menu4 li a:hover {................
.menu4 li.current a:hover {................
.menu4 li.current a:hover b {................

Cípiala y busca la misma parte en el original, cambias una por otra y así ambos quedan iguales.

Responder
ANDRES ARMAS  

Hola JMiur, ya efectué los cambios pero aun continua descentrandose todo, hasta el menú se pone en dos niveles, es decir como si le hubiese dado enter y continuara a la siguiente linea, parece que hay algun conflicto con el codigo de la plantilla, crees que haya alguna solución, te agradesco de antemano, saludos.

Responder
JMiur  

Ahora ambos se ven descentrados así que, es probable, es que hayas copiado al revés.

Lo más sencillo es volver al principio y colocar un DIV que contenga el menú, agregando <div id="menu"> antes de ul y cerrándolo al final, que quede de este modo:

<div id="menu">
<ul id="top" class="menu4">
<li> .............
......................
</ul>
</div>

Luego una definción neuva y un cambio en el CSS:

#menu {background:transparent url(http://i645.photobucket.com/albums/uu175/andres201070/profour0tc2.gif) repeat 0 0;width:100%;height:35px;}

.menu4 {
list-style-tipe:none;
margin:0 auto;
padding:0;
width:770px;
}

Responder
ANDRES ARMAS  

JHiur, te envio la imagen que se ve en la opcion diseño para que lo veas mejor, si te das cuenta la barra de blogger esta a la derecha y al parecer esa es la causa del desorden, ¿como podria hacer para que la barra de blogger que está oculta, se centre y quizas asi el menu no quede en 2 lineas en un monitor de 17 pulgadas?. Te agradesco de antemano.
http://i866.photobucket.com/albums/ab223/selectprint_/diseo.jpg

Responder
JMiur  

No veo que hayas agregado lo que te dije. Todo sigue igual.

Lo que ves en diseño nada tiene que ver con la forma en que se ve el blog. La NavBar está oculta y por lo tanto, no afecta al blog en si mismo.

Lo que se ve en diseño es sólo una representación aproximada de la distribución de las diferentes secciones y su únic utilidad es editar los diferentes elementos.

Es probable que la Navbar se muestre en una segunda línea de esa ventana de diseño si agregas algo así:

#navbar {clear:both;}

Responder
ANDRES ARMAS  

Hola JMiur, ya coloqué los códigos...¡¡¡, ahora si se centran bien, pero si te darás cuenta le aparecen unos puntitos rojos que salen al costado de en cada palabra del menú, como puedo hacer para que se eliminen estos puntos y si se puede dejar la barra de canto a canto pues tiene mejor vista ( http://i866.photobucket.com/albums/ab223/selectprint_/asi_estaba.jpg ), ese es el unico detalle, espero resolverlo pronto, muchas gracias de antemano.

Responder
ANDRES ARMAS  

Una observación, en Internet explorer no se ven las casillas del menú.

Responder
JMiur  

Cambia las propiedades. que queden exactamente así:

#menu {
background:url("http://i645.photobucket.com/albums/uu175/andres201070/profour0tc2.gif") repeat scroll 0 0 transparent;
height:35px;
width:100%;
}

.menu4 { margin:0 auto; padding:0; width:770px; }

.menu4 li { list-style-type:none; }

Responder
JMiur  

Primero, cambia lo que te dije.

Segundo, las casillas se ven lo que no se ve es el fondo porque hay un error de sintaxis, te falta separar el paréntesis de cierre de la imagen de la palabra repeat con un espacio.

Responder
ANDRES ARMAS  

No lo puedo creer...¡¡¡
Pensé que era imposible...¡¡¡
Te estoy realmente muy agradecido...¡¡¡
No sabes como he sufrido con esto...¡¡¡
Muchisimas Gracias, que Gusto me da que seas Argentino...¡¡¡
Te mando un abrazo enorme de todo Corazón.
Exitos para ti en TODOS tus proyectos... y que Dios te permita Conocerle... eres un ser muy valioso.
MUCHAS GRACIAS...¡¡¡

Responder
JMiur  

Me alegro que se haya arreglado :-)

Responder
Beliacuario  

Una pregunta, como hago para que las entradas salgan centradas por defecto?

Responder
JMiur  

No sé cuál es tu blog así que no sé cuales son los nombres de los distintos IDs o clase. Por defecto, el rectángulo que contiene las entradas tiene laclase post-body así que la regla sería:

.post-body {text-align:center;}

Pero, dependerá también de qué tipo de cosas agregues en las enradas.

Responder
Beliacuario  

Bueno ese es mi blog y he estado probando esta plantilla antes de ponerla en otro blog:
http://blogdepruebadub.blogspot.com/2011/05/quinto-post.html

he probado poniendole a todo {text-align:center;} pero los videos salen a la izquierda aun :S

gracias por la respuesta :)

Responder
JMiur  

No y si, depende del tipo de video o mejor dicho, tal como lo comentaba antes, depende del tipo de contenido que agreguea a las entradas,.

Un video de YouTube colocado pomo en el Segundo post se centrará, un DIV con un estilo aprticular como el de las pestañas que se ve en el Quinto post requiere otro tipo de solución lo mismo que el video del Tercer post.

No existe ninguna forma de establecer propiedades genéricas absolutas para todo tipo de contenido y siempre será necesario agregarlas en el mismo post a menos que lo que se publique sea algo estandarizado.

Responder
Beliacuario  

ok, muchas gracias JMiur entendi perfectamente entonces tendre que modificar entrada por entrada. ;)

Responder
JMiur  

Sí, no hay más remedio.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR