3

我正在制作一个网站，其中有一个大字体的 h1。我要做的是制作一个与文本顶部对齐的上标，但无论我做什么都没有正确对齐。

这是我正在做的事情！ http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview

所以在这个笨拙中，我试图让“TM”成为 ACME 的上标。然而，它

标记是这样的：

  <h1>
    acme
    <sup>TM</sup>
  </h1>

风格是这样的：

  body {
    padding: 60px;
    font-size: 10px;
  }
  h1 {
    font-size: 12em;
    text-transform: uppercase;
    line-height: 1em;
  }

  h1 sup {
    font-size: .1em;
    vertical-align: super;
  }
4

3 回答 3

5

设置垂直对齐和行高：

 h1 sup {
    font-size: .1em;
    vertical-align: top;
    line-height: 35px;
    margin-left: -30px;  
  }

我更新了答案，以负边距将 sup 向左推。

Plunker：http ://plnkr.co/T45y7ob43mdNY3fvC73S?p=preview

于 2013-04-08T20:13:20.140 回答
2

我可以在 Chromium 24/Ubuntu 12.10 中（完全）完成这项工作的唯一方法是使用：

h1 sup {
    position: relative;
    display: inline-block;
    font-size: .1em;
    top: -2em;

}

（我认为是分叉的）Plunker 演示。

于 2013-04-08T20:22:12.897 回答
1

你在 acme 之后额外的换行符使它换行到下一行......看看你的分叉PLUNKER

  <h1>
    acme<sup>TM</sup>
  </h1>
于 2013-04-08T20:14:27.223 回答