Container utility for centering in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a centered container using Tailwind CSS.

Tailwind

<div class="container [1]">
  <p>Centered content</p>
</div>

Drag options to blanks, or click blank then click option'

Atext-center

Bmx-auto

Cp-4

Dbg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center which centers text, not the container itself.

Forgetting to add the container class.

The mx-auto class centers the container horizontally by setting automatic left and right margins.

2fill in blank

medium

Complete the code to center text inside the container horizontally.

Tailwind

<div class="container mx-auto [1]">
  <p>This text is centered.</p>
</div>

Drag options to blanks, or click blank then click option'

Aflex

Bjustify-center

Citems-center

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex without proper flex properties.

Using items-center which aligns items vertically.

The text-center class centers the inline text horizontally inside the container.

3fill in blank

hard

Fix the error in the code to horizontally and vertically center content inside the container using flexbox.

Tailwind

<div class="container mx-auto flex [1] [2] h-64">
  <p>Centered content</p>
</div>

Drag options to blanks, or click blank then click option'

Ajustify-center

Btext-center

Citems-center

Dcontent-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center which only centers text, not flex items.

Using content-center which aligns multi-line flex containers.

Use justify-center to center horizontally and items-center to center vertically in a flex container.

4fill in blank

hard

Fill both blanks to create a responsive container that centers content horizontally and adds padding.

Tailwind

<div class="container [1] [2]">
  <p>Responsive centered container with padding</p>
</div>

Drag options to blanks, or click blank then click option'

Amx-auto

Bp-6

Ctext-left

Dbg-white

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left which does not affect container centering.

Forgetting to add padding for spacing.

mx-auto centers the container horizontally, and p-6 adds padding all around for spacing.

5fill in blank

hard

Fill all three blanks to create a flex container that centers content both ways and limits max width.

Tailwind

<div class="flex [1] [2] [3] max-w-lg mx-auto h-48">
  <p>Perfectly centered box</p>
</div>

Drag options to blanks, or click blank then click option'

Ajustify-center

Bitems-center

Cflex-col

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center which only centers text, not flex items.

Forgetting to add flex-col when vertical stacking is needed.

justify-center centers horizontally, items-center centers vertically, and flex-col stacks items vertically inside the flex container.