CODEWITHSUNDEEP
htmlcsssuperscript
learning_bee
learning_bee

Reputation: 165

How to align "sup" in h1 with big font

I am making a website where I have a h1 with a large font size. 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

So in this plunk, I am trying to make "TM" a superscript of 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;
  }

Upvotes: 4

Views: 6697

Answers (3)

David Thomas
David Thomas

Reputation: 253308

The only way I could make this work (at all) in Chromium 24/Ubuntu 12.10, is to use:

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

}

(Forked, I think) Plunker demo.

Upvotes: 2

lucuma
lucuma

Reputation: 18339

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

Upvotes: 6

brbcoding
brbcoding

Reputation: 13586

Your extra linebreak after acme is making it wrap to the next line... See your forked PLUNKER

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

Upvotes: 1

Related Questions