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

user_14586365 0
Viewed 342

I'm designing a tile calculator for my website and I'm having trouble implementing the last thing before it's ready.

Current Design

The image above shows the current state of the UI. What I need help with is to centre the "OR" vertically and add two vertical lines above and below it.

Below is the html for the calculator (excluding the javascript) and the css for the most of the calculator (let me know if you want all of it). The "OR" is in a div surrounded by another two divs.

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

.wrapper {
  display: flex;
}

.divCalc1 {}

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

If you need anything else, please ask.

Thanks!

css html
4 Answers

First, update the html for divCalc1:

<div class="divCalc1"><span>OR</span></div>

Then, update the css for wrapper and divCalc1:

.wrapper {
  display: flex;
  align-items: stretch;
}

.divCalc1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divCalc1::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  height: 100%;
  width: 2px;
  background-color: black;
  transform: translateX(-50%);
  z-index: 1;
}

.divCalc1 span {
  position: relative;
  display: inline-block;
  padding: 15px 5px;
  background-color: #FFF;
  z-index: 2;
}


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

.wrapper {
  display: flex;
  align-items: stretch;
}

.divCalc1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divCalc1::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  height: 100%;
  width: 2px;
  background-color: black;
  transform: translateX(-50%);
  z-index: 1;
}

.divCalc1 span {
  position: relative;
  display: inline-block;
  padding: 15px 5px;
  background-color: #FFF;
  z-index: 2;
}

.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"><span>OR</span></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>

user_76469420

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>

user_153773550
user_18658440

Does this work for you:-

CSS change

.divCalc1{
  border-top: solid 2px black;
  padding-top: 1rem;
  align-items: center;
  border-bottom: solid 2px black;
  height: 2rem;
}
user_42741010
Related