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

用一小时？像这样：http://liveweave.com/42IlZQ

 hr {
        padding: 0;
        border: none;
        border-top: medium double #333;
        color: #333;
        text-align: center;
    }
    hr:after {
        content: "§";
        display: inline-block;
        position: relative; 
        top: -0.7em;  
        font-size: 1.5em;
        padding: 0 0.25em;
        background: white;
    }

Answer 2

您的请求有点不清楚，因为它没有说明这个＆＃39;分隔符＆＃39;应该是分开的。

然而，垂直＆amp;使用绝对定位可以实现水平定心。

后面的＆＃39;＆＃39;是通过pseduo元素实现的。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<div class="wrap">

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

</div>

＆＃13;

＆＃13;

＆＃13;

JSfiddle Demo使用另一个更高的包装器。

Answer 3

<div class="container">
      <hr class="hr-text" data-content="AND">
     </div>

     <style type="text/css">
       .container {
      max-width: 50%;
      margin: 40px auto;
    }

    .hr-text {
      line-height: 1em;
      position: relative;
      outline: 0;
      border: 0;
      color: black;
      text-align: center;
      height: 1.5em;
      opacity: .5;
    }
    .hr-text:before {
      content: '';
      background: linear-gradient(to right, transparent, #818078, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
    }
    .hr-text:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      color: black;
      padding: 0 .5em;
      line-height: 1.5em;
      color: #818078;
      background-color: #fcfcfa;`enter code here`
    }

     </style>`enter code here`