html - 横跨 div 的中心水平线

Question

我试图在一个 div 上居中放置一条水平线，它可以根据其中的内容动态变化。我创建了一个包含内容的 div。

水平线应在框的任一侧居中，但不应在 div 内可见。

html

<div class ="box">
<hr/>
<div class="container">
          <h3>Click on either of the two buttons!</h3>
          <button class="button ">Button 1</button>
          <button class="button ">Button 2</button>
    </div>
</div>

CSS

hr {
    border: 2px solid;
}
.container {
  border: 2px solid;
  width: 45%;
  margin: auto;
  padding: 10px;
  text-align: center;
}

.button {
  background: transparent;
  border: 2px solid;
  padding: 10px 40px;
  font-size: 15px;
  text-align: center;
  margin: 20px 10px 10px 0;
  font-weight: bold;
  display: inline-block;
}

这是 codepen 的链接

Answer 1

介绍一点 Flexbox CSS。希望这有助于满足您的需求。

这是将三个元素合二为一<div>然后将它们从左到右对齐在同一行上。

(“运行代码片段”并单击整页大小，您将看到问题图像中所要求的设计)。

.box {
  display: flex;
}

hr {
  align-self: center;
  background: black;
  width: 40%; 
  height: 1px
}
.container {
  border: 2px solid;
  width: 45%;
  padding: 10px;
  text-align: center;
}

.button {
  background: transparent;
  border: 2px solid;
  padding: 10px 40px;
  font-size: 15px;
  text-align: center;
  margin: 20px 10px 10px 0;
  font-weight: bold;
  display: inline-block;
}

<div class ="box">
    <hr>
        <div class="container">
            <div>
                <h3>Click on either of the two buttons!</h3>
                <button class="button ">Button 1</button>
                <button class="button ">Button 2</button>
            </div>
        </div>
    <hr>
</div>