soy Kseso y esto EsCSS

Centrar imagen entre dos columnas de texto

Cómo centrar una imagen entre dos columnas de texto sin que haya superposición del texto sobre la imagen (o viceversa). Nivel de css: bajo. Todo es CSS2.1

Centrar imagen entre dos columnas de texto

·Por Kseso ✎ 3

Tutorial para centrar una imagen entre dos columnas, en este caso de texto. De forma sencilla y accesible para cualquiera con un mínimo conocimiento de Css
Esta técnica creo que es tan sencilla y luce tan bien como la propuesta en Css-Tricks que se apoya en pseudoelementos.

Primero el ejemplo en vivo. Uso un texto de un monólogo Luis Piedrahita, "El rey de las cosas pequeñitas". Espero que no le importe, es tan pequeñito... el texto usado y además es sólo por diversión ;-)

Los cepillos de dientes Aplacan la placa

Reconozcamos que la ciencia se está esforzando con los cepillos de dientes. De hecho, yo creo que se están pasando. Ahora mismo, el presupuesto de Defensa de un país ya es menor que el destinado a la investigación en cepillos de dientes.

No hay más que ver los anuncios de la tele: parece que los cepillos de dientes los diseña la NASA: cabezal flexible, mango ergonómicoCentrar imagen entre dos columnas de textoLuis Piedrahita
Org img: Wikipedia
antideslizante, monofilamentos semiblandos con las puntas redondeadas y cerdas cruzadas bicolor… Y eso, ¿el diente lo nota? ¡Cuesta doce euros en una farmacia! ¿Percibirá el diente si la cerda es bicolor?

En el anuncio te ponen un primerísimo primer plano de cómo se quedan los dientes si no los limpias con las cerdas cruzadas, y parece que te queda la boca llena de escombros. ¿Qué comen los señores cuyas bocas salen en estos anuncios? ¿Comen tierra? Parece que esa boca ha estado comiendo barro toda la vida.

A una persona que le va tan mal como para comer tierra yo no le recomendaría que se gastara doce euros en un cepillo de dientes. Total, cuando vas a casa de un amigo te lo olvidas y te lavas los dientes con el dedo.

Eso sí, te lavas los dientes como si no pasara nada. Sólo el detalle de que no tienes cepillo. Pasta al dedo, enjuagas, escupes…  Igual. La única diferencia respecto a lavarse con el cepillo es que no dejas el espejo como si lo hubieran pintado al gotelé.

Es inevitable: aunque metas la cabeza dentro del lavabo, luego miras al espejo y parece la Vía Láctea. ¿Os imagináis cómo tiene que estar el espejo del Cuñao? ¿Y cómo será el cepillo de dientes del Cuñao? ¿Tendrá cabezal flexible? Yo creo que el Cuñao es de esas personas que prefieren el hilo dental.

Entre los jóvenes no se usa mucho el hilo dental. Yo he visto chicas que lo usan como lencería, pero nada más.

Los cepillos son importantes porque te marcan la vida. Cuando era pequeño, mi hermana tenía un cepillo rosa de Hello Kitty. A mí eso me marcó...

Si quieres leer más... compra su libro :-D

Cómo se centra la imagen

Ahora yo debería desmenuzar los códigos Html y Css y explicártelos paso a paso. Es la forma de exponer los artículos en el blog.
Pero en este caso, y espero que a nadie le moleste, voy a optar por una vía diferente.

Por dos razones. El artículo de ayer sobre los contadores Css fue tan extenso que te ha dejado exhausto ;-). Tanto que si llegaste al final fue sin fuerzas para hacer un comentario.
Segunda: es tan sencillo el código Css y Html empleado que apenas necesita explicación a priori.

Así que esta vez te toca a ti investigar un poco. Total son 3 reglas Css (todo 2.1) y dos etiquetas Html1.1. Yo hago como el soporte técnico: cualquier duda llamas, digo, dejas un comentario y lo vamos viendo.

Nota: para facilitar la inspección, los estilos del ejemplo están marcados con el id="imagen-centrada"

Créditos y autorías:

  1. Autor del texto del ejemplo: Luis Piedrahita
  2. Este ejemplo de centrado lo encontré en: Wikipedia
  3. Autor del ejemplo del centrado de la imagen entre columnas: CssPlay

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso