CSS Define arbitrary centre for alignment

Question

I'm trying to create some CSS to display mathematical equations, and I've hit a bit of a snag.

Basically, I want to be able to line up fractions so that the line through the middle is centred with the rest of the code. This is easy enough if the numerator and the denominator are the same, just centre align everything, but if they're different sizes it messes up.

I considered enforcing the two to be the same size through Javascript, but it seems both inelegant and a bit silly if the numerator is several levels high and the denominator is just one line.

What I've got so far: (JSFiddle: https://jsfiddle.net/mqm7vr8y/)

CSS

.math-display {
    border:         1px solid #000000;
    width:          300px;
    font-family:    latin-modern-math;
    font-size:      20pt;
    text-align:     center;
}
.math-display span {
    display: inline-block;
    vertical-align:middle;
    padding: 0px 2px;
}
.math-display .divide, .math-display .numerator, .math-display .denominator {
    padding: 0px 5px;    
}
.math-display .divide {
    display: inline-block;
    text-align: center;    
}
.math-display .numerator {
    display: inline-block;
}
.math-display .denominator {
    border-top: 1px solid #000;
    display: block;
}

HTML

<div class="math-display" id="mathDisplay" tabindex="0">
<span class='number'>2</span>
<span class='operator'>+</span>
<span class='number'>3</span>
<span class='variable'>x</span>
<span class='divide'>
    <span class='numerator'>
        <span class='letter'>d</span>
        <span class='divide'>
            <span class='numerator'>
                <span class='letter'>d</span>
                <span class='letter'>u</span>
            </span>
            <span class='denominator'>
                <span class='letter'>d</span>
                <span class='letter'>v</span>
            </span>
        </span>
    </span>
    <span class='denominator'>
        <span class='letter'>d</span>
        <span class='letter'>v</span>
    </span>
</span>

I'm figuring it's likely that I'll have to handle it with Javascript, but since my knowledge of CSS is pretty weak, I thought before I did that I'd ask if there's anything I've missed which would make this work.

Cheers for any help you can offer.

Answer 1

Apply a style to a divide directly after another span:

.math-display span + .divide {
    vertical-align: -22px;    
}

https://jsfiddle.net/mqm7vr8y/4/