带有内部文本块的HTML断行器

Question

我很新，HTML，CSS等，但我一直在一个小项目。

我想在两个文本容器之间放置一个“断路器”。我发现了这样的东西，但它不适合我。我一直在寻找这样的东西：

Text 1 
---[box]Instruction--- 
Text 2 

我确实找到了一个例子，但我无法复制它。我已经在代码中达到了顶峰，但我不明白。

下面是我从想法页：HTML Basics | Codeacademy

Answer 1

有很多方法可以到达那里，这将是他们中的一个开始：

.breaker { 
 
    text-align: center; 
 
    border-top: 1px solid teal; 
 
    margin-bottom: 15px; 
 
    margin-top: 15px; 
 
} 
 
.breaker span { 
 
    background-color: white; 
 
    border: 1px solid teal; 
 
    display: inline-block; 
 
    padding: 3px 5px; 
 
    transform: translateY(-50%); 
 
}

Some text above the breaker... 
 
<div class="breaker"><span>Breaker text</span></div> 
 
...and some below.

Answer 2

我的解决方案

.text-hr { 
 
    position: relative; 
 
} 
 

 
.text-hr:before { 
 
    border: 1px solid black; 
 
    content: 'text'; 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: white; 
 
    font-size: 30px; 
 
    top: -20px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    padding: 0 20px; 
 
}

<br> 
 

 
<hr class="text-hr"> 
 

 
<br> 
 

 
<div style="width: 50%"> 
 
    <hr class="text-hr"> 
 
</div>

http://codepen.io/anon/pen/MbWjgx