I would like to align text and image in the center when it is in small devices. i tried to use text-align: center, but the text doesn't get aligned with the image. Here is my code: 

```
<div class="col-md-3 col-sm-4 col-xs-12 " style="padding-bottom:20px; ">
   <p style="height:125px; font-size: 14.4px; position: relative" class="text-responsive">
      <span style="position: absolute;top: 0;">
         <b>a long name goes here</b> <br> <br>
      </span>
      <span style="position: absolute;bottom: 0;">
      <span class="icon-clock"></span><small>8:00</small> <br>
      <span class="icon-location"></span><small>Singapore</small>
      </span>
   </p>
   <img style="max-height: 310px;" class="img-responsive" src="http://via.placeholder.com/310x310"/>
</div>

.text-responsive {
   text-align: center;
   display: block;
   max-width: 100%;
   height: auto;
}

```

Here is what i am getting:
[![enter image description here](https://i.stack.imgur.com/g2eN1.png)](https://i.stack.imgur.com/g2eN1.png)

Here is what i would like to achieve:
[![enter image description here](https://i.stack.imgur.com/wcMCY.png)](https://i.stack.imgur.com/wcMCY.png)

I would really appreciate some help! Thank you all in advance!