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://cdpn.io/spqlF

Chris Coyier就此主题发表了帖子 - http://css-tricks.com/text-blocks-over-image/

Answer 2

已解决：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;
}

当图片居中时，图片上的文字

2 个答案: