带有文本块的HTML换行符

Question

我是HTML，CSS等新手，但我一直在做一个小项目。

我想要一条线＆＃34;断路器＆＃34;两个文本容器之间。我找到了类似的东西，但它并不适合我。我一直在寻找这样的东西：

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

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

以下是我从HTML Basics | Codeacademy

获得创意的页面

Answer 1

有很多方法可以实现这一目标，这将是其中之一的开始：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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