如何使用css响应性地在顶部中心位置图像上放置文本？

Question

请看这个HTML。

 <div class="parent">
    <div>
      <span id='chn'> motrolla</span>  
      <img id="roller" src="images/motrolla.png">
     </div>
    </div>

我写媒体查询，以使这个父div响应。 我需要在图像顶部显示跨度并将其作为中心位置。 这个怎么做 ？ 目前图片下方显示的名称。

Answer 1

这是你想要的：

<div class="parent">
  <div>
    <span id='chn'> motrolla</span><br/>
    <img id="roller" src="images/motrolla.png">
  </div>
</div>


.parent div{
    text-align:center;
}

这是JSfiddle演示