如何在空白处使下划线居中？

Question

我试图在页面中央的空白处加下划线，如下所示：

我想创建“ Between____________________”行，并使其居中，如上图所示。我可以创建下划线，但是不确定如何将其放置在页面的中间/中央。以下是我的代码（我指的是this link）：

<span style="display: table-cell; border-bottom: 1px solid black;"></span>

如何使位置居中？如果您有更好的替代方法来创建空格下划线，请告诉我。谢谢。

Answer 1

如果您希望它显示在页面的中心，只需使用父元素将其居中，并将其设置为显示为内嵌块而不是表格单元格即可。

<span style="text-align: center; display: inline-block; width: 100%;">
        <span style="display: inline-block;">Between</span>
<span style="display: inline-block; border-bottom: 1px solid black; width: 100px"></span>
</span>