Writing Division as Fraction in HTML

Question

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...

What does your attempt to use MathJax look like? If you show your code we might be able to explain why it disappears, and how to stop it disappearing (since that's not the usual behaviour of MathJax). — David Thomas, Mar 23 '17 at 23:18
have you tried some of the solutions on this page http://stackoverflow.com/questions/7525977/how-to-write-fraction-value-using-html — GlacierSG, Mar 23 '17 at 23:22
And I ahve tried those solution but they don't have horizontal lines — Fin, Mar 23 '17 at 23:23

score 3 · Accepted Answer · answered Mar 24 '17 at 00:58

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

Writing Division as Fraction in HTML

1 Answers1