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

【问题标题】：Vertically Align Individual Text Characters within a Word or Sentence垂直对齐单词或句子中的单个文本字符
【发布时间】：2015-10-13 02:05:57
【问题描述】：

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

我试图将“T - S o N”作为一条线，但“o”垂直居中在“S”和“N”之间，如上面的徽标所示。

我对 CSS 非常陌生，到目前为止，我一直在努力让任何东西都能正常工作。我猜桌子是要走的路，但我真的不知道该怎么做。

非常感谢

【问题讨论】：

标签： html css wordpress alignment

【解决方案1】：

同意@mbync。这是最简单和更好的方法。如果有人仍然对如何以表格方式执行此操作感兴趣，这里是

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

【讨论】：

【解决方案2】：

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

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

这将使您的整行文本变成一行，并防止当 div 中的文本空间不足时，它会下降到下一行，即“溢出：隐藏；”属性将导致文本在空间用完时消失，而不是移出 div。

如果你想垂直对齐文本使用这个：

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

行高是我最喜欢的垂直对齐文本的方式，因为它让我可以完全控制它，而且似乎造成的问题最少。

【讨论】：