试图在两个div之间创建一条线

Question

我正在尝试创建一个介于两个div之间的行.不幸的是,我不能让这条线在两个div之间垂直对齐.上面的图片是我目前得到的.下面是html.

.line {
  vertical-align: middle;
  margin-left: 120px;
  margin-right: 200px;
  border: 2px solid red;
}
section {
  width: 100%;
  margin: auto;
}
.home {
  width: 20%;
  margin-left: 50px;
  float: left;
}
.logout {
  width: 15%;
  float: right;
  margin-right: 50px;
}

<section>
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="logout">Reports &nbsp; &nbsp;
    <button> <a href="web url"> log out </a> 
    </button>
  </div>
</section>

我尝试过使用hr标签,但我也无法使用它.

Answer 1

您可以使用 Flexbox

section {
  display: flex;
  align-items: center;
}
.line {
  height: 2px;
  flex: 1;
  background: red;
  margin: 0 10px;
}

<section>
  <div class="home">Home</div>
  <div class="line"></div>
  <div class="logout">Reports
    <button> <a href="web url"> log out </a> </button>
  </div>
</section>