Center an image inserted with after: pseudo-element; can't use spans

poetiscariot picture poetiscariot · May 28, 2012 · Viewed 15.8k times · Source

I'm pulling in a tumblr feed using tumblr's code, and using after: to add an image as a separator between posts. I'd like to center the image, but haven't had luck doing so. Since tumblr's generating the content, not me, I don't think I can use span tags, which seems to be the usual answer. Any other ideas?

Page showing feed in use: 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;
}

Answer

Zoltan Toth picture Zoltan Toth · May 28, 2012

Try this:

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