使用僞元素將圖像置於div頂部

我想使用流體網格系統將裝飾添加到我的引導程序站點中所有「well」div的頂部中心。目前這似乎工作使用僞元素將圖像置於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/

來源

2012-10-17 sguha

如果內容是一個固定的寬度（比如50像素），你可以設置

left: 50%;和margin-left:-25px;（半寬）。

來源

2012-10-18 00:07:58 Goose

「內容」是否指圖像被插入:: before僞類中？ – sguha

是的，這就是我的意思。 – Goose

一個鮮爲人知的事實是CSS將圖像視爲文本。使用這種能力，你想放span標籤的圖像周圍，並設置其風格text-align: center，像這樣：

HTML代碼：

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

CSS代碼：

span.centerImage { 
    text-align: center; 
}

的圖像將居中。

來源

2012-10-18 00:43:31

我正在尋找一種不涉及添加HTML元素的解決方案。查看問題http://jsfiddle.net/sguha095/WRB9F/中的jsfiddle。 – sguha

我對jsfiddle不是很熟悉，所以對不起，如果這是一個愚蠢的問題，但爲什麼不能添加html元素？當我點擊你的鏈接時，我得到的是html和css代碼，兩者都可以改變。我沒有在那裏看到一個問題......你需要有一個帳戶？ –

你可以在jsfiddle上編輯代碼，更多的是我想要一個解決方案，不需要我編輯我的頁面上所有'well' div的html。使用僞元素將此表示邏輯限制在樣式表中。 – sguha

使用僞元素將圖像置於div頂部

回答

相關問題