viernes, 18 de abril de 2008

Cómo centrar una imagen usando CSS

Leer también: Alinear imágenes con CSS: a Derecha, Centro e Izquierda
Como centrar imagen en bloggerCentrar imágenes implica que seamos conscientes de que CSS no tiene una forma efectiva de tratar a objetos o elementos del tipo imagen o IMG. Muy parecido a lo que ocurre con HTML con el atributo Height, en las tablas.

Posiblemente resueltas en la versión de CSS3 que no será dicho sea de paso para esta generación de navegadores.

Así que ¿cómo centramos un objeto que CSS no tiene una forma específica para ser centrado?

Bueno, la respuesta es sencilla, envolverlo en un elemento de linea como SPAN o un elemento contenedor o de bloque como DIV. En ambos casos convertiremos a elementos que pueden ser manipulados por CSS:

Primero necesitamos la imagen

<img src="http://tusitio/centrar.jpg" alt="descripción de imagen" />

Para nuestro ejemplo usaremos la de abajo:

Como centrar imagen en html

Ahora para centrarla la envolveremos dentro de una etiqueta DIV


<div><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>

A la etiqueta DIV le agregaremos el atributo STYLE que corre CSS y lo centraremos usando la propiedad text-align en modo centrado o "center". el resultado sería:

<div style="text-align:center;" > <img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>

El resultado aplicado a la imagen:

Como centrar imagen con un div


Usando SPAN y DISPLAY:BLOCK;
Si queremos podemos cambiar DIV por SPAN y quedaría:

<span style="display:block;text-align:center;" ><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></span>

Cabe destacar que aquí tendremos que agregar el atributo display y la subpropiedad block, para que trate el elemento de la misma manera que un objeto contenedor o de bloque, como una tabla o un div. esto significa que agregaremos display:block; y text-align:center; para centrar nuestra imagen y obtendremos el mismo resultado que en un div:

Como centrar imagen usando span

Usarlo desde un archivo CSS
Si lo queremos agregar a nuestra hoja de estilo y en diferentes partes de nuestra página simplemente con clases (CLASS) podremos enlazarlos sin problema:

En el archivo CSS de tu sitio escribe para el caso de un div:

.centrardiv {text-align:center;}


para el caso de SPAN escribe:
.centrarspan
{
display:block;
text-align:center;
}


Ahora en tu página web y usando CLASS podemos asociarlo a DIV de la siguiente forma:

<div class="centrardiv"><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>


o usando SPAN:
<span class="centrarspan"><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></span>


Centrar usando Padding y margin usando medidas conocidas
Esto es para centrado relativo o de porcentajes, si ustedes tiene sitios en pixeles o de tamaño fijo, otra forma de centrar es usando Padding y Margin, por ejemplo:

<img style="padding-left:150px;" border="0" src="http://tusitio/centrar.jpg" alt="centrar imagen con padding" />


Notaran que uso la propiedad padding-left, pues por lo general y a menos que lo indiquen en CSS, los objetos se alinearán a la izquierda y el padding-left hace una separación hacia dentro del objeto y el contenido tomando como inicio el lado izquierdo de la página web o el contenedor que lo rodea, convertido a valores de padding con arriba, derecha y abajo en 0, sería:

padding: 0 0 0 150px;


esto es igual a;

<img style="padding: 0 0 0 150px;" border="0" src="http://tusitio/centrar.jpg" alt="centrar imagen con padding" />


Pero es necesario conocer el tamaño del espacio y compararlo con la imagen. Si quisiéramos centrar una imagen en un espacio de 350px de ancho y nuestra imagen mide 50px, lo obvio sería con un padding-left a 150px pues la mitad de un objeto de 50 px en un espacio de 350px sería 150px + 50px + 150px. Aunque no siempre es así de fácil, por lo que recomiendo el centrado con DIV o SPAN.

Resultado:


Se puede resolver el problema de muchas formas, todo depende de la creatividad con que empleé sus conocimientos de CSS.
Dudas en comentarios.

Fé de erratas: en el artículo en cuestión, olvidé hablar del atributo display:block, pero ya está corregido.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

8 comentarios:

  1. hola... no logro entender como este codigo:

    http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=188&info=4

    una disculpa si postear links no es permitido pero me tiene loco y el ejemplo pues esta en site...

    corre en mi explorer y yo lo codifico y no me funciona pero entonces como jalaa el ejemplo que ponen. por mas que veo su codigo fuente hago lo mismo... tan asi es que en mozilla si centra y en explorer no lo hace.. pero su ejemplo en site en explorer si lo veo centrado... me desconcierta... resumen:veo que el codigo usa una clase dentro de la etiqueta img con parametro display:block y text-align:center tal y como se haria con span... otra duda... no me queda super claro la diferencia entre span y div... segun lei span es para una linea de texto y div para un bloque(trate de comprobarlo), por eso se usa el atributo display para asemejarlo a div... pero pues yo uso span para cambiar color con style a un bloque de texto de 8 lineas y si lo hace pero la alineacion por que tengo que ponerle ese parametro de diplay:block por fin se comporta como bloque para unas cosas y otras no... al final llegue a la conclusion que para alinear asi seaa una simple linea de texto te pide que cambies a block osea... no que trataba una linea sin problemas... pero eso si el color, el tipo de fuente si me lo respeta... pero la alineacion del texto debo tratarlo como bloque. algo confuso de razonar...

    ResponderEliminar
  2. Prueba aplicarlo directamente, ejemplo:

    <img style="display:block; margin-left: auto; margin-right: auto;" src="tu_imagen.jpg" " alt="" />

    o también

    La llamada CSS:

    img.centrar la debes asociar por class, por ejemplo:

    <img class="centrar" src="tu_imagen.jpg" " alt="" />

    Y debe funcionar

    Un elemento de linea como SPAN sirve para el diseño de texto no se comporta igual a DIV, si tu estableces un background-color notarás que span rodea al texto tomando en cuenta el interlineado y espaciado

    Un DIV al contrario es un elemento de bloque(rectangular) que se usa para el diseño y distribución del contenido sustituyendo el diseño por tablas, esto es, contiene objetos embebidos, imágenes y texto.

    Display es la función que permite que un objeto adquiera comportamientos de elementos de bloque aún que no todos los atributos son soportados por todos los navegadores.

    Espero que te sirva.

    ResponderEliminar
  3. Hola, creo que hay un error aquí..

    El estilo sería:

    .centrardiv {text-align:center;}

    Por lo tanto la class sería "centrardiv" y no: centrar como está en el artículo

    Solo eso.. Después está todo excelente.

    Saludos

    ResponderEliminar
  4. Toda la razón, es que como veras, esto se hace sobre la marcha así que a veces me equivoco.

    Saludos

    ResponderEliminar
  5. Abre una etiqueta center
    Y luego una "img src"
    Luego cierrala
    Luego cierra la equita center, no te olvides del simbolo / antes del center

    ResponderEliminar
  6. eki kako.

    muy bien, me ha servido estupendamente!
    en mi caso centré una imagen en html desde el css.
    utilicé un SPAN y la etiqueta :before

    para hacer mi cometido.

    Me funcionó bárbaro en IE8, en las demás ni idea si funcionará.
    Imagino que si si es que mantienen la compatibilidad hacia atrás.

    Felicitaciones!

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com