CODEWITHSUNDEEP
htmlcsstailwind-css
StudentX
StudentX

Reputation: 2323

Align 2 different elements differently in a flex box

<figure class="flex justify-center items-center">
   <img src="something.png">
   <a href="#"><img src="somethingelse.png"></a>
</figure>

I have used Tailwindcss for <figure>, the css rules are what they sound like.

Now the above centers both <img> and <a> but what I want is to center <img> but bottom-right the <a> along with the containing <img>

How do I achieve that?

Upvotes: 0

Views: 80

Answers (2)

masoudmanson
masoudmanson

Reputation: 748

You can use CSS justify-self and CSS align-self on your <a> tag to achieve what you want. Try playing with the examples in the links I provided.

Upvotes: 1

James Allen
James Allen

Reputation: 1019

Wrap them in a div! I replaced your classes with bootstrap 4 classes, but you should be able to sort it out!

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<figure class="d-flex flex-column justify-content-center align-items-center">
  <div class="d-flex flex-column align-items-end">
   <img src="http://via.placeholder.com/300">
   <a href="#"><img src="http://via.placeholder.com/80"></a>
  </div>
</figure>

Upvotes: 0

Related Questions