2012-05-28 20 views
12

Estoy tirando de un feed tumblr usando el código de tumblr, y usando after: para agregar una imagen como separador entre las publicaciones. Me gustaría centrar la imagen, pero no he tenido suerte al hacerlo. Como tumblr está generando el contenido, no yo, no creo que pueda usar etiquetas de span, que parece ser la respuesta habitual. ¿Alguna otra idea?Centrar una imagen insertada con after: pseudo-element; no puede usar tramos

página que muestra la alimentación en uso: lumn.net/index.shtml

CSS:

.tumblr_post:after { 
    content: url(../img/flower.png); 
    display: block; 
    position: relative; 
    margin-top: 42px; 
    margin-bottom: 24px; 
    margin-left: auto; 
    margin-right: auto; 
} 
+1

Por favor, copie el [JS violín] (http://jsfiddle.net/), o similares, en el que podemos ver y editar , el código en acción. –

Respuesta

16

Prueba esto:

.tumblr_post:after { 
    content: url("../img/flower.png"); 
    display: block; 
    margin: 42px auto 24px; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
7

Mientras que la respuesta de Zoltan Toth funciona, tiene un montón de código que hace nada para el efecto deseado. Esto debería hacer el truco y con menos código.

.tumblr_post:after { 
    content: url("../img/flower.png"); 
    display: block; 
    text-align: center; 
} 
0

Aquí es una solución de trabajo en todas las pantallas:

.produit-col .img-produit::after{ 
    content: ''; 
    background: url("../img/icone.png") center no-repeat; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    display: none; 
} 
Cuestiones relacionadas