Tailwind CSS Vertical Align
The vertical-align utility class in Tailwind CSS is used to define the vertical alignment of inline-level elements within a parent container. It works by modifying the vertical-align property of the element.
Syntax
The syntax for using the vertical-align utility class in Tailwind CSS is as follows:
<div class="align-{value}"></div>
Here, value can be one of the following:
baseline: Aligns the element to the baseline of the parent container.top: Aligns the element to the top of the parent container.middle: Aligns the element to the middle of the parent container.bottom: Aligns the element to the bottom of the parent container.
Example
Let's take a look at an example that uses the vertical-align utility class to align an image vertically within a parent container:
<div class="h-40 w-40 bg-gray-200 flex items-center justify-center">
<img src="https://via.placeholder.com/150" alt="Sample image" class="align-middle">
</div>
Here, we have used the align-middle class to vertically align the image within the parent container.
Output
The above example will output the following:
Explanation
The align-middle utility class sets the vertical-align property of the image to middle, thus aligning it vertically to the middle of the parent container.
Use
The vertical-align utility class can be used to align any inline-level element such as text, images, and icons, vertically within a parent container.
Important Points
- The
vertical-alignutility class only works for inline-level elements. - The
vertical-alignproperty has some quirks when it comes to aligning elements vertically. It is advisable to use the utility classes provided by Tailwind CSS to avoid any unexpected behavior. - The
vertical-alignutility class has no effect on block-level elements.
Summary
The vertical-align utility class in Tailwind CSS is a useful tool for aligning inline-level elements vertically within a parent container. It provides a simple and easy-to-use solution for vertical alignment without the need for custom CSS.