Having trouble aligning text vertically with CSS? All you need to do is use the vertical-align property. Works for tables as well:
<style>
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
</style>
<table border="1">
<tbody>
<tr>
<td class="top">I'm at the top</td>
<td class="middle">I'm in the middle</td>
<td class="bottom">I'm at the bottom</td>
</tr>
</tbody>
</table>Copied to clipboard!
The above example, wil produce the following:
| I'm at the top | I'm in the middle | I'm at the bottom |
Apart from the three values, it can also take the value of:
baseline: it's initial value, the element is aligned to the baseline of its parent.sub: Aligns the elements to the subscript-baseline of its parent.super: Aligns the elements to the superscript-baseline of its parent.text-top: Aligns the top of the element with the top of its parent element's font.text-bottom: Aligns the bottom of the element with the bottom of its parent element's font.
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
