在图像链接旁边对齐文本链接

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

为图片添加pull-left对您有用：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-md-12">
  <div class="parent">
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=FB"> FB</a>
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=TW"> TW</a>
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=IN"> IN</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，只需提供另一个课程并将display设置为inline-block。因为，.image-responsive所做的只是设置max-width和height设置display: block;。

＆＃13;

＆＃13;

.img-responsive.inline-responsive {display: inline-block;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-md-12">
  <div class="parent">
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=FB"> FB</a>
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=TW"> TW</a>
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=IN"> IN</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

注意：正如我之前所说，img-responsive将block级别显示添加到<img />，因此不可能同时拥有img-responsive以及图片显示inline ... :(

Answer 2

.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>