css - 将单词中第一个字符之后的所有字符垂直居中

Question

你好，

我希望在第一个字符之后将单词的所有剩余字符垂直居中，主要用于标题。

a busy cat http://www.maiocv.com/TEST/stackoverflow.jpg

CSS:

    .middletext {
        font-size:70%;
        vertical-align: top;
        line-height: 25%;
    }

HTML:

    <h1><span>C<span class="middletext">ustomer</span> B<span class="middletext">ilgewater</span></span></h1>

我遇到的一个问题是，当我使用 H2 时，父字体大小发生变化，但中间文本未正确对齐。

我该怎么办，有没有更简单的方法？

感谢您的帮助。

Answer 1

我会更改第一个字母的字体大小而不是其余字母，这样您就不需要为行高操心了:

HTML

<h1>
    <span class="capital">C</span><span>ustomer</span> 
    <span class="capital">B</span><span>ilgewater</span>
</h1>

CSS:

h1 span {vertical-align:middle;}
h1 .capital {font-size:120%;} /* or whatever size you want it to be*/

Example