如何在中间用两个 div 包围的文本制作一条垂直线？- html/css

GloatingCoin

我正在为我的网站设计一个平铺计算器，但在它准备好之前我无法实现最后一件事。

上图显示了 UI 的当前状态。我需要帮助的是将“OR”垂直居中并在其上方和下方添加两条垂直线。

下面是计算器的 html（不包括 javascript）和大多数计算器的 css（如果你想要全部，请告诉我）。“OR”位于由另外两个 div 包围的 div 中。

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

如果您还需要什么，请询问。

谢谢！

比伯曼

你可以做到这一点align-items: center的包装和两个伪元素::before和::after你设置width: 0及其border为1px，使之成为2px的（左边框+边框右侧）。包装器需要这样做position: relative。

伪元素是绝对定位的，可以通过将其left属性设置为来对齐到中心50%。“下方”和“上方”由bottom: 0和控制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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。