Jayden Jayden - 4 months ago 21
HTML Question

Align Text Links Beside Image Links

I have these codes:

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


And it's giving me this:

Output

I want to move the text to the right of the image.
Is there anyway I can make it happen without removing the
img-reponsive
class?

I want it to be like:

Output

Answer

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

Comments