垂直定位分数的跨度

Question

我想显示分数，我调整了这个css： https://stackoverflow.com/a/24438923/3787706

但现在我想在等式中添加更多内容，但操作符号（如“+”）位于底线。

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

Answer 1

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

请求后编辑

我将操作符移动到html，移动到属性data-operator="+"，CSS从中读取要放入伪内容的内容。人们还可以在混合中添加额外的元素，但这样做无济于事。

使用额外元素而不是伪元素更新了3：rd示例。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="test1">
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
  <span class="fraction">
    <span class="middle">&nbsp;</span>
    <span class="middle" data-operator="+">&nbsp;</span>
  </span>
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
</div>
<div class="test2">
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
  <span class="fraction">
    <span class="middle">&nbsp;</span>
    <span class="middle" data-operator="+">&nbsp;</span>
  </span>
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
</div>
<div class="test3">
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
  <span class="fraction">
    <span class="middle">&nbsp;</span>
    <span class="middle">&nbsp;<span>+</span></span>
  </span>
  <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Src：adding fractions in css

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

添加到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>

预览