html - CSS - 中间有文本的分隔符

Question

我需要在中间创建一个带有文本的分隔符。我所说的中间是指水平和垂直居中 - 这种技术有很多使用伪元素或中间额外跨度的示例。

这是我通常会使用的一些代码 - 使用 span 方法:

h2.centre-line
{
   width:40%; 
   text-align:center; 
   border-bottom:0.1rem solid #ccc; 
   line-height:0.1em;
   margin:2.5rem 30%; 
} 

h2.centre-line span
{ 
    background-color:#fff;
    padding:0 1rem; 
}

<h2 class="centre-line"><span>Text</span></h2>

到目前为止，我发现的所有示例都存在一个问题，即文本位于透明背景上，周围有边距。但是我想要做的是将文本放在一个具有高度的容器中并保持居中，如下所示:

目前我无法成功调整我的代码，也没有遇到任何进一步合适的示例。

有什么想法吗？

Answer 1

您的要求有点不清楚，因为它没有说明这个“分隔符”应该分隔什么。

但是，垂直和水平居中可以通过使用绝对定位来实现。

“后面的线”是通过伪元素实现的。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  height: 200px;
  position: relative;
  background: lightgrey;
  margin: 5px;
}
h2.centre-line {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  transform: translate(-50%, -50%);
}
h2.centre-line:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  z-index: -1;
  background: red;
}
h2.centre-line span {
  background-color: lightblue;
  padding: 1rem;
  display: inline-block;
}

<div class="wrap">

  <h2 class="centre-line"><span>Text</span></h2>

</div>

JSfiddle Demo用另一个更高的 wrapper 。