垂直对齐单词或句子中的单个文本字符

Question

我使用的是基于线条和文字的徽标。我想在我的网站中包含一个变体，但是从CSS创建徽标。

我试图得到＆＃34; T - S o N＆＃34;作为一条线，但与＆＃34; o＆＃34;垂直居中于＆＃34; S＆＃34;和＆＃34; N＆＃34;，如上面的标志。

我对CSS很陌生，到目前为止一直在努力工作。我猜测桌子是要走的路，但我真的不知道如何去做。

非常感谢

Answer 1

同意@mbync。这是最简单，更好的方法。如果有人仍然对表格中的方法感兴趣，那么它就是

＆＃13;

＆＃13;

<table>
  <tbody>
    <tr style="height: 25px;">
      <td>S</td>
      <td style="vertical-align: initial;">o</td>
      <td>N</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想确保文本无论如何都保持在同一行，请使用：

div#logo {
 white-space: nowrap;
overflow: hidden;
}

这将使整行文本成一行，并防止当文本用完div中的空格时，它会下降到下一行，“overflow：hidden;”如果文本用完房间而不是移到div之外，属性将导致文本消失。

如果要垂直对齐文本，请使用以下命令：

div#logo {
line-height: 100px; /* play around with this value */
}

线条高度是我最喜欢的垂直对齐文字的方式，因为它让我可以完全控制它，它似乎可以解决最少的问题。