CODEWITHSUNDEEP
javascriptjqueryhtmlcssnumbers
Fin
Fin

Reputation: 353

Writing Division as Fraction in HTML

I want to write code to show different math formulas. I want to make the formula for mean (average) and it is currently ∑n⁄n:

<span class="frac"><sup>&sum;n</sup><span>&frasl;</span><sub>n</sub></span>

but this doesn't look very good. I want to make it so that the line is horizontal with text above and below it.

Any ideas on how to do this with just HTML/JS/JQUERY/CSS? I've tried MathJax but it loads then disappears for some reason...

Upvotes: 1

Views: 2205

Answers (1)

Rodrigo Aires
Rodrigo Aires

Reputation: 339

Here is what I think that you are looking for...

<div  class="All"><div class="Sum">&sum; =</div><span class="Fraction"><span class="Numerator">n234</span><span class="Denominator">43242m</span></span>


.All {
  display: table-row;
}
.Sum {
  display: table-cell;
  vertical-align: middle;
}
.Fraction {
    display: table-cell;
    text-align: center;    
}
.Denominator{
    border-top: 1px solid #000;
    display: block;
}
.Fraction, .Numerator, .Denominator {
    padding: 0px 5px;    
}

Demo

Upvotes: 3

Related Questions