CODEWITHSUNDEEP
htmlcss
ray
ray

Reputation: 933

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.

Upvotes: 3

Views: 4650

Answers (3)

Devidas Kadam
Devidas Kadam

Reputation: 944

Try this,

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>

See the live demo fiddle

Upvotes: 0

CZorio
CZorio

Reputation: 483

If you are not familiar with flexbox yet (I recommend you become so and follow the answer posted by Nenad) and want another solution you can simply use position: relative on the .line and specify a top value.

Following code taken from the fiddle example you can find below:

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

See fiddle

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 9

Related Questions