带有以jsx为中心的文本的HR标签

Question

我需要像这样的简单jsx代码：

------------------------------------------------标题----------------------------------------------

所以简单的一行中间有文本，显示在该行本身上，没有任何背景（甚至没有该行）。

我已经尝试过：

<div style={{"width": "100%", "height": "20px", "border-bottom": "1px solid black", "text-align": "center"}}>
  <span style={{"font-size": "40px", "padding": "0 10px"}}>
    Title
  </span>
</div>

但是它不能使文本对齐，甚至不会在行上显示它。 我的问题与此不同：CSS technique for a horizontal line with words in the middle 由于该代码无效，因此我在这里使用不同的sintax。