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的链接

标签： htmlcss

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>