Css Vertical Align

CSS vertical align

Created By: chatGPT

vertical-align is a CSS property used to align inline or table-cell elements along the vertical axis. It is particularly useful for handling the positioning of elements inside a line box or table cell. This property can accept various values including: baseline, sub, super, top, text-top, middle, bottom, text-bottom, and inherit.To use vertical-align, you often apply it to the elements you want to align. Here's a simple example to demonstrate its use:

Consider the following HTML setup:

<span style="vertical-align: super;">Super</span> <span style="vertical-align: sub;">Sub</span>

The code above renders the words 'Super' and 'Sub' aligned vertically within a line. Here’s how you can make it clear with CSS for elements within a table cell or block.

<table>
    <tr>
        <td style="vertical-align: top;">Top aligned text.</td>
        <td style="vertical-align: bottom;">Bottom aligned text.</td>
    </tr>
</table>

In this table example, the text in the first cell is aligned to the top, while the text in the second cell is aligned to the bottom.

To see more practical application, consider using vertical-align in conjunction with images and text:

<div style="line-height: 50px;">
    <img src="image-url" style="vertical-align: middle;" alt="Image" /> Some text here.
</div>

In this example, the image is vertically aligned middle with respect to the line height of 50px. This can greatly enhance the visual alignment of text and graphics in your designs.Remember that vertical-align works only on inline elements, inline-block elements, and table cells. Using it with block elements will not yield the expected results. Always ensure to test and adjust values to achieve the desired layout.