代码之家 › 专栏 › 技术社区 › McPherrinM

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

typography css html

4

McPherrinM · 技术社区 · 15 年前

我希望将HTML中的字符与它旁边的字符顶部对齐。CSS垂直对齐属性似乎是我想要的,但我遇到了一些问题。

使用 vertical-align: text-top 似乎做不到我想要的,但我认为应该从阅读规范开始。

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

要查看此示例,请参阅正在使用的示例,在mcpherin的c中。

Raised C http://thewaffleproject.com/upc.png

4 回复 | 直到 15 年前

1

0

Keltex 15 年前

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

首先定义一些样式:

.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>

2

Byron Sommardahl 15 年前

试试 <sup> 标签。这就是你想要做的。在您实现它之后,您可以使用CSS对它进行更多的控制。

例子: M<sup>c</sup>Phe 耶德姆 ^C 苯丙氨酸

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

如果“c”太小,就这样做 <style> sup { font-size: 9pt } </style> 或者类似的。

3

1

Josh Stodola 15 年前

安东尼对这个问题的评论给了我一个用正确的语义来包装“c”的想法。 <sup> 标签(或者我猜你可以继续使用 <span> )然后使用CSS text-transform: uppercase; 关于它。

4

1

McPherrinM 15 年前

其中一些想法是正确的,但没有一个完全有效。最后我结合了乔希·斯托多拉的建议 text-transform: uppercase; Keltex建议使用较小字体的大写字母作为伪小大写字母,即使不需要使用表格。

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

使用建议 <sup> 不是很有帮助,因为我无论如何都要覆盖它的所有样式,所以它与 <span> . 在语义上可能有区别,但小到不重要。