How to Put a Vertical Line Down The Center of a Div

HTML CSS Vertical Line with exact height of a div

You can attain it using a simple border on the left.

.mytext {
  border-left:3px solid red;
  padding-left:15px;
  }

<div class="mytext">
<h1>Head<h1>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
</div>

vertical line on the middle of the page

Since elements in HTML are rendered from top to bottom, there's no way of adding a vertical line as easily as using a <hr>. One way would be to split up the page in two <div>s and adding a border to one of the two <div>s like this:

.left-col {  width: 50%;  min-height: 200px;  border-right: 1px solid black;  float: left;  box-sizing: border-box;}
.right-col {  width: 50%;  min-height: 200px;  float: right;}

<div class='page'>  <div class='left-col'>    Content in the left column  </div>  <div class='right-col'>    Content in the right column  </div></div>

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

How do I make a vertical line with text in the middle surrounded by two divs? - html/css

You can achieve this with align-items: center on the wrapper and two pseudo elements ::before and ::after which you set to width: 0 and its border to 1px, so that it becomes 2px (border-left + border-right). The wrapper needs position: relative for that.

The pseudo elements are positioned absolutely and can be alligned to the center by setting its left property to 50%. "Below" and "above" are controlled by bottom: 0 and top: 0.

.holderCalc {
  margin: auto;
  width: 75%;
  border: solid 2px black;
  text-align: center;
  padding: 10px;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.divCalc1 {}

.divCalc1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc2 {
  color: black;
  text-align: center;
  font-size: 16px;
}

.divLine1 {
  width: 80.7%;
}

.divLine2 {
  width: 90.8%;
}

.lxbBox {
  width: 50%;
}

.area10Calc {
  width: 50%;
}

.inputCalc {
  background-color: white;
  color: grey;
  width: 80%;
  height: 50px;
  border: solid 2px black;
  font-family: initial;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: futura-pt;
  padding: 2px;

<div class="holderCalc">
  <br>
  <div class="wrapper">
    <div class="lxbBox">
      <select class="inputCalc" id="ddm" onchange="areaUpdated()">
        <option value="mm">MILLIMETRES</option>
        <option value="cm">CENTIMETRES</option>
        <option value="inch">INCHES</option>
        <option value="m">METRES</option>
      </select><br><br>
      <input id="len" class="inputCalc" type="text" placeholder="LENGTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()"><br>
      <p class="divCalc2">X</p>
      <input id="wid" class="inputCalc" type="text" placeholder="WIDTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()">
    </div>
    <div class="divCalc1">OR</div>
    <div class="area10Calc">
      <input id="area" class="inputCalc" type="text" placeholder="AREA (M²)" autocomplete="off" onclick="areaUpdated()" onchange="validateInput()"><br><br><br>
      <hr class="divLine1" size="2px" color="black">
      <br>
      <input id="addWaste" type="checkbox">
      <label class="text" for="addWaste">ADD 10% FOR CUTS AND WASTES</label><br><br>
      <button onclick="calculate()" class="calculateButton">CALCULATE</button>
    </div>
  </div>
  <hr class="divLine2" size="2px" color="black">
  <p class="text" id="output">TO COVER 0.00M², YOU NEED 0 TILES</p>
</div>

center vertical line between divs

jsFiddle demo

Add a span element between .left and .right

<span class="middleLine"></span>

CSS:

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    text-align:center; /* ADD THIS */
}
.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}
.left {
    float: left;
    /*border-right: 3px solid red; REMOVE THIS */
}
.right {
    float: right;
}
body {
    background:blue;
}

span.middleLine{
   display:inline-block;
   border-right: 2px solid red;
   margin-left:-1px; /* cause the border is 2px */
    height:100%;
}

Centred vertical line between two divs

Change your margins to paddings, and then set the border

div.contentswrapper {  text-align: center;  margin: 0 auto;  max-height: 720px;}div.pageleft,div.pageright {  display: inline-block;  vertical-align: top;  overflow: auto;}div.pageleft,div.pageright {  width: 40%;  padding-left: 3%;  padding-right: 3%;}div.pageleft {  border-right: 2px solid red;}

<div class="contentswrapper">
  <div class="pageleft">    <h1>Lorem Ipsum</h1>    <p>    </p>    <p>    </p>  </div>
  <div class="pageright">    <h1>Lorem Ipsum</h1>    <p>    </p>    <p>    </p>  </div></div>