Twitter bootstrap 使用伪元素将图像居中放置在div顶部

我想使用流体网格系统在我的引导站点的所有“well”div的顶部中心添加装饰。目前看来这是可行的

.well {
    position: relative;
}
.well:before {
    content: url("http://placehold.it/20/E8117F");
    top: -10px;
    left: 45%;
    position: absolute;
}

但是

左：45%

只是将其居中的近似值，有更好的方法吗

---

这是我的小提琴

如果内容是固定宽度（比如50px），您可以设置

---

左：50%和
左边距：-25px（宽度的一半）。
一个鲜为人知的事实是CSS将图像视为文本。使用该功能，您可能希望在图像周围放置一个
span
标记，并将其样式设置为
text align:center
，如下所示：

HTML代码：

<span class="centerImage"><img src="..." /></span>

图像将居中
 “内容”是指插入到：：before伪类中的图像吗？我正在寻找一种不涉及添加HTML元素的解决方案。查看问题中的JSFIDLE。我对JSFIDLE不是很熟悉，如果这是一个愚蠢的问题，那么很抱歉，但是为什么不能添加html元素呢？当我点击你的链接时，我得到的是html和css代码，它们都是可以更改的。我在那里看不到一个问题…你需要一个帐户吗？你可以在JSFIDLE上编辑代码，更重要的是我想要一个解决方案，它不需要我为所有
well
div编辑页面上的html。使用伪元素将此表示逻辑限制在样式表中。
span.centerImage {
     text-align: center;
}