ray ray - 7 months ago 10
HTML Question

trying to create a line between two divs

enter image description here

I am trying to create a line that will go between two divs. Unfortunately I can't get the line to align its self vertically between the two divs. The image above is what I am currently getting. Below is the 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>





I have tried using an hr tag but I can't get that to work either.

Answer

You can use 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>