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

时间:2016-07-07 08:03:37

标签: html css

我有这些代码:

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

它给了我这个:

Output

我想将文本移动到图像的右侧。 无论如何我可以在不删除img-reponsive类的情况下实现它吗?

我希望它像:

Output

2 个答案:

答案 0 :(得分:0)

为图片添加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-widthheight设置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-responsiveblock级别显示添加到<img />,因此不可能同时拥有img-responsive以及图片显示inline ... :(

答案 1 :(得分:0)

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