CODEWITHSUNDEEP
tailwind-css
Fayakon
Fayakon

Reputation: 1523

How to align Text in Tailwind css

enter image description here

with Tailwind css i am trying to align image and text on both sides, not matter how the text is image and text started position should not change. can you please tell me what i am missing or doing wrong.

Code: https://play.tailwindcss.com/kFSxJ8tMdD

Upvotes: 0

Views: 2443

Answers (1)

Preman Terminal
Preman Terminal

Reputation: 157

May be you can try this.

Use content-start to pack rows in a container against the start of the cross axis:

<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Use content-center to pack rows in a container in the center of the cross axis:

<div class="h-48 flex flex-wrap content-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Use content-end to pack rows in a container against the end of the cross axis:

<div class="h-48 flex flex-wrap content-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Use content-between to distribute rows in a container such that there is an equal amount of space between each line:

<div class="h-48 flex flex-wrap content-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Use content-around to distribute rows in a container such that there is an equal amount of space around each line:

<div class="h-48 flex flex-wrap content-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:

<div class="h-48 flex flex-wrap content-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Upvotes: 0

Related Questions