时间戳

首页 > 解决方案 > 使两条平行线从左右垂直位于内容的中心

html - 使两条平行线从左右垂直位于内容的中心

问题描述

我面临一个问题，也许不是一个大问题，但我无法弄清楚我该怎么做

我想要double line介于 divleft (Subtotal)和right ($200).
谁能帮我这个？

我已经尝试过，但我无法使其垂直居中。

附上我希望它的外观的屏幕截图： 在此处输入图像描述

我尝试过的代码片段：

.row{
  display: flex;
}

.dividerLine{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    border: 2px solid red;
    height: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">  
  <div class="row">
      <div class="col-3 start-lines">
          <p class="order-receipt-label light-label">   
            <span>Subtotal</span>
          </p>
      </div>
    <div class="col-sm-4 dividerLine" style="background-color:lavenderblush;">
    
    </div>
    <div class="col-3 start-lines">
       <p class="order-receipt-label light-label">                       
          <span>Subtotal</span>
       </p>
     </div>
  </div>
</div>
</body>
</html>

产品总数，我想在它们之间制作双线附上屏幕截图的外观：

标签： htmlcsscentervertical-alignment

解决方案

您可以通过提供属性并从内部的标签中.row删除来实现这一点。align-items: center;marginp.start-lines

推荐阅读