在HTML中在文本之间添加横线

Question

我想在HTML中在文本之间添加一条水平线，就像这张截图中显示的那样。从这段代码中，我得到了一条线，但它不是在文本之间居中的。我该如何实现这个效果？

我需要的是像这样的东西：Publication---------------------Method。

我的代码：

.horizontal{
    display: inline-block;
    width: 100px;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

- Hotdot Cyber

---

类似于这个链接 https://dev59.com/3W435IYBdhLWcg3wyzMJ 的CSS技术可以实现在水平线的中间加入文字。 - Bishwas

Answer 1

您可以为 h4 标签设置 flex 规则。使用居中规则 align-items: center。这个示例可以将您的行与文字中心良好对齐。

.col-sm-4 h4 {
    display: inline-flex;
    align-items: center;
}

.horizontal{
    /*display: inline-block;*/
    width: 100px;
    margin: 0;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

- s.kuznetsov

Answer 2

另一种解决方法是使用伪选择器 ::after。

.horizontal::after{
  content: "";
  display: inline-block;
  border:1px solid black;
  margin-left:2px;
  margin-bottom: 3px;
  width: 100px;
}

<div class="col-sm-4">
    <h4>
        <span class="horizontal">Publication</span> 
        Method
    </h4>
</div

- Friday Ameh

Answer 3

添加 vertical-align 属性 text-top。

vertical-align:text-top;

.horizontal{
    display: inline-block;
    width: 100px;
    vertical-align:text-top;
}

<div class="col-sm-4">
    <h4>Publication<hr class="horizontal"/>Method</h4>
</div

- Rayees AC