Текст на картинке, когда картинка центрированной

Здесь вы можете увидеть скрипку: 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, предпочтительно центр их. Все выравнивается по тексту: центр; но это выглядит текст по-прежнему назначен налево

источник

2013-12-12 John Smith

набор изображений в качестве фона текста. установите ширину для текста и добавьте float –

, к сожалению, это должно быть «clickable» –

РЕШИТЬ: 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; 
}

источник

2013-12-12 16:51:57 rafaelcastrocouto

одна вещь, они должны быть рядом друг с другом :) –

Внешнего контейнер должен быть установлен в положении относительного и текст выровненного центра и внутренний текст должен быть установлен на абсолютный с шириной.

http://cdpn.io/spqlF

И пост Крис Coyier на эту тему - http://css-tricks.com/text-blocks-over-image/

источник

2013-12-12 17:30:22 davidwickman

выше проголосовали за пост криса! – rafaelcastrocouto

Текст на картинке, когда картинка центрированной

ответ

Смежные вопросы