I received this question from Bryden:
I have a mix of upper and lower case letters but I want them to run on a center line rather than 'sit' on a ruled line.
This is an interesting question as Bryden is attempting to treat each glyph in the text block as a separate tiny image - rather than as a part of the text block. On first review, it seems like the CSS property vertical-align would be the correct answer to this question. Perhaps this would work:
h1 { vertical-align: middle; }
Unfortunately, no matter which option you use in the vertical-align style property, none of them will change the location of the baseline of the text. This is because text in a Web page is set within a text box that all the glyphs in that font will fit. There is a baseline, where the bottom of the fonts will touch, a lower border, where lowercase hanging letters (such as p or g) will drop to, and a top border above the tallest letters. Even if you wrote a line of text using only small lowercase letters (like e, o, c, u, v, r, etc.), the text will take up the space required for the tall letters and hanging letters.
What Does Vertical-Align Do?
The vertical-align style property looks at everything on the current line - text and images. It then looks at the height of the text boxes or images, and aligns the object with the tallest item on the line. For example, the text in this HTML would be aligned at the top of the line formed by the initial image:
<p>
<img src="" style="height:50px; width:10px; border:solid black 1px;" /> <span style="vertical-align: top; font-size: 12pt;">The quick brown fox...</span>
</p>
You can see how the different values of the vertical-align style property work online.
To answer Bryden's question, no, there isn't a way, with CSS, to style text so that the baseline of the font changes to line up the glyphs vertically centered. Instead, you would have to turn the text into images and align the glyphs in a graphics program.
