相对于包裹内联范围

Question

如何在带下划线的文字下方的中心显示数字？

我的代码适用于简单的情况，但是当文本换行时，数字不再位于文本的中心位置：

我想要这样的东西：

这是我到目前为止编写的代码。

＆＃13;

＆＃13;

p {
  line-height: 28px;
}
.bottom_bullet_spn {
  position: relative;
  display: inline;
  vertical-align: top;
  padding: 0 0 20px;
}
.bottom_bullet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px !important;
  top: 13px;
  text-align: center;
}

＆＃13;

<div class="question mb10  other_question ">
  <div style="vertical-align: top;padding-bottom: 1em;">

    <div class="questions_passage passage_content_1804">
      <p>Lorem ip<span style="display: inline; text-decoration: underline;" class="bottom_bullet_spn">sum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag<span class="bottom_bullet" data-order="1">1</span></span>na
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui <span style="display: inline; text-decoration: underline;" class="bottom_bullet_spn">officia deserunt mollit anim id est laborum.<span class="bottom_bullet" data-order="2">2</span></span>
      </p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSfiddle

数字2正确居中，但数字1不居中。

Javascript解决方案也可以使用

Answer 1

如果您不关心窗口调整大小，那么您可以尝试这样做：

.bottom_bullet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 9px !important;
    top: 0;
    margin:10px auto 0 auto; //you can also use margin:0 auto; But text will overlap.
    width:20px;
}

演示： http://jsfiddle.net/grLe7snj/2/

但如果您担心调整大小，那么我建议您将这个小数字放在带下划线的文本的末尾。通过这种方式，您将解决您的问题，并且在用户方面也会很好。通常，您将这些数字放在文本末尾或很少在开头（参考维基百科）

在这种情况下：

.bottom_bullet {
    position: absolute;
    bottom: 0;
    left: 100%;
    right: 0;
    font-size: 9px !important;
    top: 0;
    margin:10px auto 0 auto;
    width:20px;
}

演示：http://jsfiddle.net/grLe7snj/3/