Как разместить текст поверх изображения без ущерба для оригинальной компоновки?

Question

У меня есть эта страница:

http://avocat2.dac-proiect.ro/?page_id=17

Это мой код HTML:

<div class="row sss"> 
     <div class="row"> 
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center"> 
     <ul class="lista-imagini" style="text-align:center;"> 
     <li class="ion"><img src="wp-content/themes/WordPressBootstrap-master/images/b1.jpg" class="img-responsive center-block" alt="Responsive image"/><p class="qqq" style="color:white;">asdasdsa</p></li> 


...//some code 

</ul> 
</div> 

Я хочу, чтобы поместить текст поверх картинок (текст .qqq), но изображение (.ion)

Я пробовал это решение, но, к сожалению, испортил фотографии. Фотографии только сохраняют место.

.ion { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

.qqq { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
} 

После того, как я добавил вышеуказанный код, сайт выглядит.

http://i61.tinypic.com/531a4p.jpg

Как я могу сделать фотографии, чтобы быть выровнены только после того, как вы добавите эти коды? Можете ли вы помочь мне решить эту проблему?

Заранее благодарен!

Answer 1

это будет работать нормально

li.ion { 
    position: relative; 
} 

.qqq { 
    color: white; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -19px; 
} 

Answer 2

Там нет никаких проблем для меня с вашим кодом.