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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

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

    ResponderBorrar
  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.

    ResponderBorrar
  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

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

    Saludos

    ResponderBorrar
  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

    ResponderBorrar
  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!

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[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.