CODEWITHSUNDEEP
htmlcss
AlfaTeK
AlfaTeK

Reputation: 7765

Perfectly vertical align top of fonts of 2 different text sizes using CSS

I want to achieve this design: example

Note that both text are perfectly top aligned but I'm almost sure this is impossible to achieve in CSS in a scalable way (I mean not hardcoding pixels with position relative/top for example).

Using flex looked like a good way to achieve this but since this is text, the top alignment is correct but based on the text 'bounding box' but the letters '77' don't take up 100% height of that box, causing it to not be perfectly aligned.

I understand why this happens since letter 'a' doesn't take up the same space as letter 'X' but I was just wondering if someone can find out a very nice tricky to achieve this design.

Here are my two attempts at this: 

div#a {
  
  background:#EEE;
  line-height: 1;
}


span {
  vertical-align: text-top;
}

#b {
  display: flex;
  align-items: flex-start;
}

 
 <div id="a">
        <span style=" font-size: 48px;">77</span>
        <span style="font-size:14px;;">USD</span>
    </div>

<div id="b">
  <div style=" font-size: 48px; line-height: 48px;">77</div>
  <div style=" font-size: 14px;">USD</div>
</div>

(please note there is a related issue but they didn't want 'perfect' alignment like this)

Upvotes: 6

Views: 1628

Answers (2)

Pablo Darde
Pablo Darde

Reputation: 6402

I think you can use this approach and tuning the line-height property.

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-bottom: 10px;
}

div .container span {
  line-height: 60%;
}
<div id="a">
  <div class="container">
    <span style=" font-size: 48px;">77</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>

<div id="b">
  <div class="container">
    <span style=" font-size: 48px;">100</span>
  </div>
  <div class="container">
    <span style="font-size:14px;">USD</span>
  </div>
</div>

Upvotes: 7

Mister Moody
Mister Moody

Reputation: 114

MDN documentation indicates that modifying the value of span { vertical align: text-top; } by replacing text-top with super (or *50% to shift the baseline) will help you accomplish your objective!

I learned this while preparing to suggest that you replace the aforementioned declaration with the HTML <sup> tag, which enables 'superscript' on specified inline text.

Check out documentation and decide what works best for your project~ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

Upvotes: 0

Related Questions