使用伪元素将图像居中放在 div 的顶部答案

【问题标题】：Using pseudo element to center image at the top of a div使用伪元素将图像居中放在 div 的顶部
【发布时间】：2012-10-17 23:59:02
【问题描述】：

我想使用流体网格系统在我的引导站点中的所有“井”div 的顶部中心添加装饰。这目前似乎有效

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

但left: 45% 只是将其居中的近似值，有更好的方法吗？

这是我的小提琴http://jsfiddle.net/sguha095/WRB9F/

【问题讨论】：

标签： twitter-bootstrap responsive-design pseudo-element

【解决方案1】：

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

left: 50%; 和 margin-left:-25px;（宽度的一半）。

【讨论】：

“内容”是指插入 ::before 伪类中的图像吗？

【解决方案2】：

一个鲜为人知的事实是 CSS 将图像视为文本。使用该功能，您需要在图像周围放置一个span 标记并将其样式设置为text-align: center，如下所示：

HTML 代码：

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

CSS 代码：

span.centerImage {
     text-align: center;
}

图像将居中。

【讨论】：

我正在寻找一种不涉及添加 HTML 元素的解决方案。查看问题jsfiddle.net/sguha095/WRB9F中的jsfiddle。
我对jsfiddle不是很熟悉，如果这是一个愚蠢的问题，很抱歉，但是为什么不能添加html元素？当我单击您的链接时，我得到的是 html 和 css 代码，两者都非常可变。我在那里没有看到问题...您需要有一个帐户吗？
您可以在 jsfiddle 上编辑代码，更重要的是我想要一个不需要我为所有 well div 编辑页面上的 html 的解决方案。使用伪元素将这种表示逻辑限制在样式表中。