如何在不损坏原始排列的情况下将文本放在图像上？

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

我的代码没有问题。