在javascript中将左边框移动到中心

我正在更改当前的

div

，因此我需要在

div

的中间处设置一条垂直线。因此，我看到了许多解决方案，在这些解决方案中，他们制作了一个左边框，并借助左属性将其移动到左边框的50%（实际上是在中间）

下面是我如何制作我的

div:

if (id == "Metricbar" ) {
      var Parentdiv = document.getElementById("homeContainer");
      var rowDiv = document.createElement("article");
      rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
      rowDiv.style.border = "1px solid #ddd";
      rowDiv.style.marginBottom = "1px";
      rowDiv.style.marginTop = "1px";
      rowDiv.style.borderLeft = "2px solid #ddd";
      Parentdiv.appendChild(rowDiv);


      var ctrlDiv = document.createElement("div");
      ctrlDiv.setAttribute("data-widget-editbutton", "false");
      ctrlDiv.className = "jarviswidget";
      ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
      ctrlDiv.id = id;
      var temp = $compile(ctrlDiv)($scope);
      angular.element(rowDiv).append(temp);
      rowDiv.appendChild(ctrlDiv);
} 

我的问题是如何将其移动到中心。有办法吗

我试过：

rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";

但这一切都无济于事。谁能给我指一下正确的方向吗

HTML文件：

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
   <div class="row" id="homeContainer"></div>
   <div class="modaldialogs" style="display: none">
      <div class="center">
         <img alt="" src="img/ajax-loader.gif" />
      </div>
   </div>
</section>

但是我已经多次使用这个div了。我是根据身份证来查的

我想要这条黑线，如图所示

---

如果您只需要在

文章

元素中添加一条垂直线，那么让我们使用最简单的解决方案-CSS

首先，给出

文章

元素和

位置：相对

或

位置：绝对

。然后在psuedo元素之后添加一个

：以创建一个垂直条

HTML和Javascript都没有改动（除了对文章边框的一个小改动），所以您只需要添加几行CSS


var Parentdiv=document.getElementById（“homeContainer”）；
var rowDiv=document.createElement（“文章”）；
rowDiv.setAttribute（“类”，“col-sm-12 col-md-12 col-lg-12”）；
rowDiv.style.marginBottom=“1px”；
rowDiv.style.marginTop=“1px”；
rowDiv.style.borderTop=“2px solid#ddd”；
rowDiv.style.borderRight=“2px solid#ddd”；
rowDiv.style.borderBottom=“2px solid#ddd”；
rowDiv.style.borderLeft=“2px solid#ddd”；
Parentdiv.appendChild（rowDiv）
#homeContainer文章{
高度：300px；//仅用于演示，因为我们没有内容
位置：相对位置；
}
#homeContainer文章：之后{
内容：“；
身高：100%；
宽度：0px；
位置：绝对位置；
右边框：3px实心#000000；
右：50%；
}
我找到了答案。我们可以使用javascript和一个新的类名来创建一个新的div，这个类名将留有一个边框

这是我的解决方案

var element = document.createElement('div');
element.className = "divider";
rowDiv.appendChild(element); \\appending it to parent

CSS

你可以分享你的HTML吗？@BrettDeWoody我已经分享了你可以添加一个显示所需效果的图像吗？@BrettDeWoody我已经添加了所需的图像，你想使用
article
元素吗？问题就在这里，正如我在文章中说的，我不想要相同的id，这就是我尝试在javascript中更改的原因。第二，当框一个接一个地动态形成时，它们会与行重叠。如果我在HTML中更改，则此更改将应用于所有地方。您需要提供一个更完整的示例。我正在使用的HTML代码用于创建更多类似于这些的文本框，因此底部将有一个框，但我只希望在第一行或顶部有一行一个。因此，我给文本框指定了不同的ID，以区分它们。在我的JavaScript中，您可以看到，我首先检查id，然后继续。但解决方案会在每个框中添加边框，这不是正确的解决方案。希望现在我明白了好吧，听起来你需要一点改变。我们只需要针对
#metricBar
元素中的
文章
元素？
.divider {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  bottom: 0;
  left: 45%;
  border-left: 2px solid #C0C0C0;
}