JSFiddle - React, Tailwind, and code Playground

by Chevex

HTML

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>
<br />
<div style="vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>
<br />
<img style="vertical-align: top;" src="http://i.imgur.com/WeuPI.jpg" /> I am some top-aligned text.<br /><br />
<img style="vertical-align: middle;" src="http://i.imgur.com/WeuPI.jpg" /> I am some middle-aligned text.<br /><br />
<img style="vertical-align: bottom;" src="http://i.imgur.com/WeuPI.jpg" /> I am some bottom-aligned text.<br /><br />

CSS

td
{
    height: 150px;
    border: solid 1px #f00;   
    padding: 10px;    
}
div
{
    height: 150px;
    border: solid 1px #00f;
    padding: 10px;
    width: 300px;    
}
img
{
    width: 100px;   
}