垂直位置我想显示的级分的级分

的跨度，以及i适于此CSS： https://stackoverflow.com/a/24438923/3787706 垂直位置我想显示的级分的级分

但现在我想更多添加到方程，但操作标志（如“+”）坐落在底线。

我怎样才能居中的边界之间？＃号的参考点是什么？最佳做法是什么？我不想一起破解它，并让它在手机，平板电脑或不同的浏览器分辨率上破解

来源

2016-01-09 user3787706

我敢肯定有在互联网上更好的例子，也许寻找另一个 – CoderPi

我开始在这方面努力：http://jsfiddle.net/sm9ya7x6/1/ – CoderPi

我现在更新了我的答案规模无论字体大小。 – LGSon

这里是一个版本，从您引用的帖子扩展而来。要求

后

编辑我从哪里CSS读什么投入伪内容移动运营到HTML，到属性，data-operator="+"。人们也可以在混音中添加额外的元素，但是这样做没有任何好处。

使用额外元素而不是伪元素更新为3：rd样本。

.test1 { font-size: 16px; } .test2 { font-size: 32px; } .test3 { font-size: 48px; } .fraction { display: inline-block; text-align: center; } .fraction, .top, .bottom, .middle { padding-left: 2px; padding-right: 2px; position: relative; } .bottom { border-top: 1px solid black; display: block; } .middle { display: block; } .middle ~ .middle:after { content: attr(data-operator); position: absolute; top: -50%; left: 0; } .middle ~ .middle span { position: absolute; top: -50%; left: 0; }

<div class="test1"> 1 6     1 6 </div> <div class="test2"> 1 6     1 6 </div> <div class="test3"> 1 6    + 1 6 </div>

源：adding fractions in css

来源

2016-01-09 21:48:43 LGSon

但那是固定的px ..响应性呢？ – user3787706

@ user3787706第一个解决方案已经设置了px。那么你对“响应性”意味着什么？ – LGSon

是的，我删除了我的实施12px。 2px填充是没有问题的，但我认为这个垂直对齐在PX会漂移在不同的设备 – user3787706

添加到LGSon的回答，多了一些改进。

.fraction { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.fraction, 
 
.top, 
 
.bottom { 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
    font-size: 12px; 
 
    vertical-align: top; 
 
} 
 
.bottom { 
 
    border-top: 1px solid black; 
 
    display: block; 
 
} 
 
.vertical { 
 
    display: block; 
 
    margin-top: 0.5em; 
 
}

<span class="fraction"> 
 
    <span class="top">1</span> 
 
    <span class="bottom">6</span> 
 
</span> 
 
<span class="fraction"> 
 
    <span class="vertical">+</span> 
 
</span> 
 
<span class="fraction"> 
 
    <span class="top">1</span> 
 
    <span class="bottom">6</span> 
 
</span>

前瞻：

来源

2016-01-09 21:51:54

但这是固定px ..那么响应呢？ – user3787706

@ user3787706使用另一种方法 – CoderPi

@ user3787706更新了'em'中的响应性。 –

改进版本：http://jsfiddle.net/sm9ya7x6/

.fraction { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.operation { 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: 36px; 
 
} 
 

 
.fraction, 
 
.top, 
 
.bottom { 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
    font-size: 12px; 
 
} 
 

 
.bottom { 
 
    border-top: 1px solid black; 
 
    display: block; 
 
} 
 

 
.bottom { 
 
    padding-top: 2px; 
 
}

<span class="fraction"> 
 
    <span class="top">1</span> 
 
<span class="bottom">6</span> 
 
</span> 
 

 

 
<span class="operation">+</span> 
 

 
<span class="fraction"> 
 
    <span class="top">1</span> 
 
<span class="bottom">6</span> 
 
</span>

来源

2016-01-09 21:53:27 CoderPi

在浏览器中看起来很低调。http://i.imgur.com/UCmU4bM.png –

@PraveenKumar：D这些浏览器。我想你会再次默认另一个字体系列？ – CoderPi

垂直位置我想显示的级分的级分

回答

相关问题