CSS Alignment
Updated on
Last site update: 8 May 2024
Unfinished article
I recently came across an interesting article by Rachel Andrew on alignment in CSS. This coincided with me having problems aligning some things for this site. Specifically the NEXT and PREVIOUS button text was not well vertically aligned and I couldn’t align the RSS icon (an inline SVG) with the RSS text in the footer.
The fix for the buttons was:
- Giving the buttons a fixed height in pixels.
- Setting the line height to the same height.
In the case of the RSS icon and text I didn’t actually figure out the fix but instead stumbled across the fact that having the text under the icon was probably better to what I was after which was aligning the tops. All I had to do then was a quick text-align: center;, the best and simplest alignment property going IMO, and I was done.