Question

我希望将HTML中的字符与其旁边的字符顶部对齐。 css vertical-align属性似乎是我想要的，但我遇到了一些麻烦。

使用vertical-align: text-top似乎没有做我想要的，但我认为应该从阅读规范。

目前，我正在使用vertical-align: 10%这是一个合理的解决方案，除了我必须在每个平台上计算正确的数字以使其看起来正确。浏览器检测到将值设置为我认为可能正确的值似乎是错误的解决方案。

Answer 1

尝试<sup>标记。它意味着你正在尝试做什么。实现后，您可以使用css控制它。

示例：M<sup>c</sup>Phe yeilds M ^c Phe

http://www.w3schools.com/TAGS/tag_sup.asp

如果“c”太小，只需<style> sup { font-size: 9pt } </style>或类似的东西。

Answer 2

Anthony对这个问题的评论给了我一个想法，用一个语义正确的<sup>标签包装“c”（或者我猜你可以继续使用<span>），然后使用CSS { {1}}就可以了。

Answer 3

其中一些想法是正确的，但没有一个完全奏效。我最终将Josh Stodola的建议与Keltex建议使用text-transform: uppercase;的建议结合起来使用较小字体的大写字母来制作伪小型大写，即使使用表格是不合理的。

它仍然依赖于字体大小和线条高度，但我至少可以通过这种方式获得更一致的效果。

使用<sup>的建议并不是很有用，因为我必须覆盖其所有样式，因此它与<span>没有区别。在语义上可能存在差异，但足够小以至于无关紧要。

Answer 4

丑陋，但你可以使用表格单元格。

首先定义一些样式：

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

然后是html：

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>

将字符与相邻字母的顶部对齐

4 个答案: