如何使用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;
}

Here is the JSfiddle demo