CSS定义任意对齐中心

问题描述

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

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

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

到目前为止我得到了什么：（JSFiddle： ：//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的了解非常微弱，所以在我做之前我想过我会问是否有任何我错过的东西可以使这个工作。

欢呼您提供任何帮助。

对于每种情况，我都想不出在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： ：//jsfiddle.net/mqm7vr8y/5/

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

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

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

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