Tailwind CSS tutorial #29: Vertical Align
Published: 2022-12-07 14:26:23

In the article, we will go into detail on how to use `Vertical Align`.

## Vertical Align
**Format**
> `align--{uppercase|lowercase|capitalize|none}`

| Tailwind Class | CSS Property |
| ------ | ------ |
| `align-baseline` | ` vertical-align: baseline;`|
| `align-top` | `vertical-align: top;`|
| `align-middle` | ` vertical-align: middle;`|
| `align-bottom` | ` vertical-align: bottom;`|
| `align-text-top` | ` vertical-align: text-top;`|
| `align-sub` | ` vertical-align: sub;`|
| `align-super` | ` vertical-align: super;`|

# Basic usage

Utilities for controlling the vertical alignment of an inline or table-cell box.


## **Code**
```html
<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
 <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-baseline">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	align-baseline;	</span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-top">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	align-top;	</span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block 	align-middle">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	align-middle	</span>
  </li>
 <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-bottom">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	align-bottom;	</span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-text-top">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	align-text-top;	</span>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <li class=" inline-block align-text-bottom">
    Now this is a story all about how, my life got flipped-turned upside down
    </li>
 <span class="text-xs font-semibold font-mono whitespace-nowrap placeholder-red-100 px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">	 align-text-bottom;	</span>
  </li>

</ul> 
```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Vertical%20Align)link.

**Overall Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f71em9ylgu54bv88nf2a.png)



**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛