Articles / Vertically Centred Icon-Style Headings
Dan Cederholm offers an amazing collection of resources for styling webpages. One of my favourite techniques is Icon-Style Headings.
Dan uses the technique over at Fast Company. The premise behind Icon-Styled Headings is the designer includes what appears to be a bullet for heading tags. When the heading is displayed on the screen, the icon accompanies it. The technique allows the designer to build a heading that is easy to find. It allows the designer to organise similar headings with the same icon (like on Fast Company). It also allows the designer to change the icon directly from a central CSS file rather than going into every page and editing it.
One issue I frequently experience when trying to implement Icon-Styled Headings is an image that is vertically aligned with the top of the heading text when I want it vertically aligned with the centre. Since the image is declared as a background image, trying to change the margin or padding in the CSS file also changes the margin and padding of the heading text.
I found a simple solution however. The trick is creating the padding in your imaging editor.
Let us say your heading is 18 pixels high. Now, let us say the icon you want to use is 12 pixels high. When displayed, this will show an extra 6 pixels between the bottom of the icon and the baseline of the text.
Open your icon in your favourite image editing software. In Photoshop, you would go to "Image>Canvas Size...".
Then you would change the height to 15 pixels, make sure the selected anchor is on the bottom row, and press "OK".
Upload your image, and you should see what appears to be an icon that is vertically aligned with the centre of the heading text.
