css - 对齐 2 个 html 元素，将它们居中，彼此重叠

Question

我有这个代码:

<div  class="col-sm-4">
    <h4>{{$TagName->TagName}}</h4>
    <img style="
    width:  200px;
    height: 200px;
    ";
    class="img-responsive"; src="images/{{$TagName->TagName}}.jpg"> 
</div>

所以我的想法是(像这样):

***text***
*imageeee*

代替:

text******
imageeee**

* 表示占用的空间，我不知道如何更好地表示我正在寻找的解决方案。 我将 text-align:center 用于 div，将 2 display:block 用于 html 元素，但它也不起作用。(如果需要的话，我也在使用 bootstrap)

关于如何解决这个问题的一些想法？

Answer 1

html

<div  class="col-sm-4 text-center">
    <h4>this is text</h4>
    <img style="
    width:  200px;
    height: 200px;
    ";
    class="img-responsive imageCentered"; src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"> 
</div>

CSS

.imageCentered{
  margin:0 auto;
}

这里是 jsfiddle