文字上的圖片，在畫面的中心

Question

在這裏你可以看到小提琴：http://jsfiddle.net/WdZeC/

<div class="text_align_center" style="text-align: center;"> 
    <div style="position: relative;"> 
     <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"> 
     <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div> 
    </div> 
    <div style="position: relative;"> 
     <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"> 
     <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div> 
    </div> 
    <div style="position: relative;"> 
     <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"> 
     <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div> 
    </div> 
    <div style="position: relative;"> 
     <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"> 
     <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div> 
    </div> 

<img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><div class="left"> 
</div> 

我要做到以下幾點：

IMG IMG IMG IMG IMG IMG IMG 

並寫入到IMG，最好在他們的中心。一切都是文字對齊：中心;但看起來文本仍分配到左

Answer 1

解決：http://jsfiddle.net/WdZeC/1/

<div class="container" > 
    <div class="text_align_center"> 
     <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" /> 
     <div class="over_img">1</div> 
    </div> 
    <div class="text_align_center"> 
     <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" /> 
     <div class="over_img">1</div> 
    </div> 
    <div class="text_align_center"> 
     <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" /> 
     <div class="over_img">1</div> 
    </div> 
    <div class="text_align_center"> 
     <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" /> 
     <div class="over_img">1</div> 
    </div> 
</div> 



.text_align_center { 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    width: 27px; height: 28px; 
} 
.img_under { 
    position: absolute; 
    top: 0; left: 0; 
} 
.over_img { 
    width: 27px; height: 28px; 
    position: absolute; 
    top: 0; left: 0; 
} 

Answer 2

外容器需要被設置成相對於與文本對齊中心和內文需要被設置爲絕對的寬度。

http://cdpn.io/spqlF

而且關於這一主題的克里斯Coyier後 - http://css-tricks.com/text-blocks-over-image/