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

Question

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

WebView

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

我尝试过使用hr标签，但我也无法使用它。

Answer 1

您可以使用Flexbox

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你还不熟悉flexbox（我建议你这样做并按照N​​enad发布的答案）并想要另一个解决方案，你可以在position: relative上使用.line并指定一个最高值

以下代码取自小提琴示例，您可以在下面找到：

.line {
  border: 2px solid red;
  width: 50%;
  margin: 0 50px 0 100px;
  position: relative;
  top: 10px;
}

请参阅fiddle

Answer 3

试试这个，

<强> CSS：

.line {
  vertical-align: middle;
  display: table-cell;
  padding-left: 120px;
  padding-right: 200px;
  width: 65%;
}

hr {
  border: 1px solid red;
}

section {
  width: 100%;
  margin: auto;
  display: table;
}

.home {
  width: 20%;
  padding-left: 50px;
  display: table-cell;
  vertical-align: middle;
}

.logout {
  width: 15%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 50px;
}

<强> HTML：

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

查看实时演示fiddle