[英]How to align “sup” in h1 with big font
I am making a website where I have a h1 with a large font size. 我正在制作一个网站,我有一个带有大字体的h1。 What I am trying to do is to make a superscript that is aligned to the top of the text but no matter I do sup is not aligned properly. 我想做的是使一个上标与文本的顶部对齐,但是无论我做什么都不能正确对齐。
Here is the plunk of what I am working on! 这是我正在努力的地方! http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview
So in this plunk, I am trying to make "TM" a superscript of ACME. 因此,在此尝试中,我试图使“ TM”成为ACME的上标。 However, it 但是,
Mark up is this : 标记是这样的:
<h1>
acme
<sup>TM</sup>
</h1>
Style is this: 风格是这样的:
body {
padding: 60px;
font-size: 10px;
}
h1 {
font-size: 12em;
text-transform: uppercase;
line-height: 1em;
}
h1 sup {
font-size: .1em;
vertical-align: super;
}
Set the vertical align and the line height: 设置垂直对齐方式和线条高度:
h1 sup {
font-size: .1em;
vertical-align: top;
line-height: 35px;
margin-left: -30px;
}
I updated the answer to push the sup to the left with a negative margin. 我更新了答案,以使负数以负数向左推动。
Plunker: http://plnkr.co/T45y7ob43mdNY3fvC73S?p=preview 柱塞: http ://plnkr.co/T45y7ob43mdNY3fvC73S?p = preview
The only way I could make this work (at all) in Chromium 24/Ubuntu 12.10, is to use: 我完全可以在Chromium 24 / Ubuntu 12.10中完成这项工作的唯一方法是使用:
h1 sup {
position: relative;
display: inline-block;
font-size: .1em;
top: -2em;
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.