Javascript CSS定义对齐的任意中心

我正试图创建一些CSS来显示数学方程，但我遇到了一点障碍

基本上，我希望能够把分数排成一行，这样穿过中间的那一行就以代码的其余部分为中心。如果分子和分母是一样的，这很容易，只要把所有的东西居中对齐就行了，但是如果它们的大小不同，那就搞糟了

我曾考虑通过Javascript将两者强制为相同大小，但如果分子高出几级，分母仅为一行，则这似乎既不雅观，也有点愚蠢

到目前为止我得到的：（JSFiddle:）

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>

2.
+
3.
x
D
D
U
D
v
D
v

我想我很可能不得不用Javascript来处理它，但由于我对CSS的知识相当薄弱，所以在我这么做之前，我想我会问一下，我是否遗漏了什么可以让这项工作成功的东西

---

为您能提供的任何帮助干杯。

您可以在分母类上使用：before伪元素，而不是在分母类的顶部使用边框，并在divide类上设置相对位置

.divide{
    position: relative;
}
.divide .denominator:before{
    content:'';
    display:block;
    height:1px;
    width:100%;
    margin:auto;
    background-color:black;
    position: absolute;
    left:0;
}

这将使伪元素占据父除法的整个宽度，并位于分母跨度的顶部

---

将样式直接应用于另一跨距后的分隔：

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

---

我想不出任何方法可以在CSS中处理每个场景。我有一种感觉，即使有办法，也不会优雅。您概述的javascript方法并没有那么糟糕，您可以通过一些额外的努力来删除这个荒谬的空间

您需要添加另一个内部div并使其位置相对。另外，将

.math dispay

的溢出设置为隐藏。Javascript将完成其余工作：

$('.math-display-inner').each(function() {
    // fix the height of the parent before we move content around
    $(this).parent().height($(this).height());

    var numH = $(this).find('> .divide > .numerator').height();
    var demH = $(this).find('> .divide > .denominator').height();
    var diff = demH - numH;

    if (demH > numH) {
        diff /= 2;
        $(this).find('> .divide').css('margin-top', diff + 'px');
        $(this).css('top', (-diff) + 'px');
    }
    else {
        diff -= diff/2;
        $(this).find('span + .divide').css('vertical-align', diff + 'px');
    }
});

jsfiddle：

---

Edit对于更复杂的方程，这实际上会发生故障：/可能必须递归地应用相同的技术，可能需要注入包装器类。不优雅，但应该有用…

那把小提琴看起来和OP的没什么两样太棒了，谢谢！我从未见过他们。但是，您能告诉我，有没有办法在相邻选择器中选择第一个子项？它似乎存在，但我找不到提及。基本上要解决这个问题：是的，像这样：

[element]+[sibling][child]：第一个孩子

。它使用。我会编辑你的小提琴，但我不能通过看它来确定问题是什么：哦，没问题，我可以从那里解决。干杯