I'm trying to style my surname, McFarlane, on my personal page. When I write my name, I usually place the top of the small c in line with the top of the F. I'm struggling to apply this consistently in CSS.

I've put the c in a sup element and tried setting its vertical-align property to top, text-top and middle. None achieve the correct effect consistently. text-top is the closest, but the c drifts downwards on smaller font sizes.

Any ideas?

Thanks in advance, Ross McFarlane

1 answer

Mottie 1134
This was chosen as the best answer

Try using a negative em.... something like this:


#name span { position: relative; top: -0.2em; left: 0; }


<div id="name">M<span>c</span>Farlane</div>
Answered almost 8 years ago by Mottie