Text positioning within div

[edharrison89]

I am using an icon font on my website, but I am having difficult getting each glyph in the centre of a circular div. I have given each glyph an individual line-height but this also alters the position of the whole div.

Any ideas how to best position these? My site can be found here (the icons are inside three circles underneath the thumbnails). Thanks in advance!

[Paulie_D]

To centre the text in a div for use like that you just have to make sure all your numbers work out.

Ideally, your div height and text line-heights should be the same. The divs height and widths should be the same and then your border radius is half the div height.

The text should be set to align centre too.

http://codepen.io/Paulie-D/pen/xmeIy

[edharrison89]

The twitter icon sits slightly higher than the other icons so my problem isn’t aligning the icons horizontally but vertically.

Its fine though, I’m going to use an image for the new twitter icon instead, so the layout is fine now. Thanks for the advice!

[Author]

Posts