对齐字符到相邻字母的顶部

StackOverflow https://stackoverflow.com/questions/2300499

  •  21-09-2019
  •  | 
  •  

题

我想在HTML字符对齐的字符在它旁边的顶部。 CSS的垂直对齐属性似乎是我想要的，但我遇到了一些麻烦。

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

目前，我使用vertical-align: 10%这是一个合理的解决方案，但我一定要计算每个平台上的适当数量得到它看的权利。浏览器检测到的值设置为一个，我觉得可能是正确的似乎是错误的解决方案。

有帮助吗？

解决方案

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

首先定义一些样式：

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

其他提示

尝试<sup>标签。它意味着exacly你试图做什么。当你实现它，你甚至可以多用CSS来控制它。

例：M<sup>c</sup>Phe yeilds中号 C 的Phe

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

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

安东尼对问题的意见给了我一个想法来包装“C”，用语义正确<sup>标签（或我想你可以继续使用<span>），然后使用CSS text-transform: uppercase;就可以了。

一些观点是正确的轨道上，但没有相当的工作。我结束了乔希斯托多拉的建议与Keltex的建议，使用大写字母用较小的字体有伪小型股，即使使用表格是unnessicary相结合，利用text-transform: uppercase;。

它仍然依赖于把玩周围的字体大小和行的高度，但我可以得到一个比较一致的效果这样至少。

的建议，使用<sup>是不是真的有用，因为我不得不反正覆盖其所有的风格，所以它不会从<span>不同。语义上可以存在差别，但足够小，它并不重要。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top