HTML: <TD> Tags Not Vertically Aligned

Date: 2016-04-25 |

**Problem: **I have an HTML table with rows containing two tags. For some reason, the text within these tags is not vertically aligned, causing a small vertical shift. How can I fix this?

Example:

Screen Shot 2016-03-23 at 2.43.25 PM

Hard to see, but if you look really close, you can see that the results on the right are positioned slightly higher than the fields on the left.

**Solution: **The solution is the valign style.

In your CSS, just add:

td {
vertical-align: bottom;
}

This will cause the vertical-align: bottom style to be added to all of your td tags, so all the content is aligned to the bottom of the “cell”. This will change the above example to look something like:

Screen Shot 2016-03-23 at 3.05.18 PM

Want more like this?

The best / easiest way to support my work is by subscribing for future updates and sharing with your network.