使用after:pseudo-element插入的图像居中; 不能使用跨度

poe*_*iot 13 css pseudo-element centering

我使用tumblr的代码提取tumblr feed,并使用after:在帖子之间添加图像作为分隔符.我想把图像居中,但没有运气这么做.由于tumblr生成的内容,而不是我,我不认为我可以使用span标签,这似乎是通常的答案.还有其他想法吗?

显示正在使用的Feed的页面: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;
}
Run Code Online (Sandbox Code Playgroud)

Zol*_*oth 17

试试这个:

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


小智 7

虽然Zoltan Toth的答案有效,但它有一堆代码对所需效果无效.这应该可以解决问题并减少代码.

.tumblr_post:after {
    content: url("../img/flower.png");
    display: block;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)


小智 6

这是所有屏幕上的有效解决方案:

.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;
}
Run Code Online (Sandbox Code Playgroud)