html - 对齐图像链接旁边的文本链接

Question

我有这些代码:

<div class="col-md-12">
  <div class="parent">
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a>
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a>
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a>
  </div>
</div>

它给了我这个:

我想把文字移到图片的右边。无论如何，我可以在不删除 img-reponsive 类的情况下实现它吗？

我希望它是这样的:

Answer 1

.parent > a{
  display: flex;
  align-items: center;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
  <div class="parent">
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a>
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a>
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a>
  </div>
</div>