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>

Answer 2

您可以使用transform来完成您要执行的操作。

在这里，我为您的父容器添加了固定高度，然后使用

将hr和框垂直居中

  position:relative;
  top:50%;
  transform:translateY(-50%);

所有这些操作是使用父元素的高度将元素垂直居中放置。

hr {
  position:relative;
  top:50%;
  transform:translateY(-50%);
  border: 2px solid;  
}
.box{
  height:300px;
}
.container {
   position:relative;
  top:50%;
  transform:translateY(-55%);
  border: 2px solid;
  width: 45%;
  margin: auto;
  padding: 10px;
  text-align: center;
  background-color:white;
}

.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">
          <h3>Click on either of the two buttons!</h3>
          <button class="button ">Button 1</button>
          <button class="button ">Button 2</button>
    </div>
</div>

Codepen

Answer 3

.example {
    display: flex;
    justify-content: center;
    width: 100%;
}

.example::before,
.example::after {
  display: flex;
  align-items: center;
  content: '';
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  height: 3px;
  background: #000;
}

 .example::before {
   margin-left: -100%;
}

.example::after {
  margin-right: -100%;
}

.example div {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: 20px;
}

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