Question

我试图创建一些CSS来显示数学方程式，而且我遇到了一些障碍。

基本上，我希望能够排列分数，以便通过中间的线与其余代码对齐。如果分子和分母是相同的，这很容易，只需将中心对齐所有内容，但如果它们的大小不同则会混乱。

我考虑通过Javascript强制执行这两个相同的大小，但是如果分子是几个高级且分母只是一行，它似乎既不优雅又有点傻。

到目前为止我所得到的：（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>

我认为我可能需要使用Javascript来处理它，但由于我对CSS的了解非常薄弱，所以在我做之前我想过我会问如果有任何我错过的东西可以使这项工作。

欢呼您提供任何帮助。

Answer 1

在另一个范围之后直接将样式应用于除法：

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

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

Answer 2

我想不出任何方法可以在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：https://jsfiddle.net/mqm7vr8y/5/

编辑这实际上会分解更复杂的方程：/可能必须递归地应用相同的技术，可能会注入包装类。不优雅，但应该工作......

Answer 3

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

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

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

https://jsfiddle.net/hv53oqd2/

CSS定义任意对齐中心

3 个答案: