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

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

Answer 2

http://jsfiddle.net/JV8LL/8/

使用此CSS：

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

Answer 3

更新了你的小提琴，基本上是反过来。

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

和

.uppertext {
    font-size:150%;
    vertical-align: middle;
}

http://jsfiddle.net/JV8LL/11/

Answer 4

使用CSS ::first-letter选择器代替将第一个字母分隔为标记。 （对不起，它必须是块元素而不是内联 - span）

Answer 5

http://jsfiddle.net/JV8LL/3/

如果你设置line-height: 150%;它似乎运作良好。