如何在div的中心放置一条垂直线？

Question

如何在div的中间放置一条垂直线？也许我应该在div中放置两个div并在另一个上放置一个左边框和一个右边框？我有一个DIV标签,我需要在左侧放置一个ascx(将不时与另一个ascx交换掉),然后在左侧放置一个静态ascx.关于我应该怎么做的任何想法？也许我回答了自己的问题.

任何指针都会很棒

Answer 1

也许这可以帮到你

.here:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
    transform: translate(-50%);
}

div {
    margin: 10px auto;
    width: 60%;
    height: 100px;
    border: 1px solid #333;
    position:relative;
    text-align:center
}

<div class="here">Content</div>

这是一个JSFiddle演示.

Answer 2

尽管这个问题是在9年以前提出的，但很多答案还是可以的。CSS已经发展了，您现在可以在不使用的情况下在一行中完成操作calc。

一班班轮（2018）答案：

background: linear-gradient(#000, #000) no-repeat center/2px 100%;

如何运作

1. linear-gradient(#000, #000)这会创建一个，background-image以便我们以后可以使用background-size它来包含它。
2. no-repeat当我们戴上渐变色时background-size，它可以防止渐变重复出现。
3. center-这就是background-position我们放“跳水线”的地方
4. /2px 100% -这会使图片宽2像素，并且是您放入的元素的100％。

这是扩展版本：

  background-image: linear-gradient(#000, #000);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;

Answer 3

这是一种在div中划一条线的更现代的方法.只需要一点点css:

.line-in-middle {
    width:400px;
    height:200px;
	  background: linear-gradient(to right, 
	                              transparent 0%, 
	                              transparent calc(50% - 0.81px), 
	                              black calc(50% - 0.8px), 
	                              black calc(50% + 0.8px), 
	                              transparent calc(50% + 0.81px), 
	                              transparent 100%); 
	}

<div class="line-in-middle"></div>

适用于所有现代浏览器.http://caniuse.com/#search=linear-gradient

Answer 4

刚刚测试过；作品：

<div id="left" style="width:50%;float:left;background:green;">left</div>
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div>

Answer 5

我认为你的多 DIV 方法将是解决这个问题的最明智的方法：

<DIV>
   <DIV style="width: 50%; border-right: solid 1px black">
      /* ascx 1 goes here */
   </DIV>
   <DIV style="width: 50%">
      /* ascx 2 goes here */
   </DIV>
</DIV>