Question

我想使用流体网格系统将装饰添加到我的引导站点中所有“井”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/

Answer 1

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

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

Answer 2

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

HTML code：

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

CSS代码：

span.centerImage {
     text-align: center;
}

图像将居中。

使用伪元素将图像置于div的顶部

2 个答案: