如何在 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 class="wrapper">
    <div>Float this one left</div>
    <div>float this one right</div>
</div>

*请务必在左右之间留出空间以显示图像。

你需要一个看起来像这样的样式：

.wrapper{background:url(img.jpg) 0 12px repeat-y;}

Answer 6

这是我的版本，使用linear-gradient的渐变中间线

.block {
      width:400px;
      height:200px;
      position:relative;
 }
.block:before {
      content:"";
      width:1px;
      height:100%;
      display:block;
      left:50%;
      position:absolute;
	    background-image: -webkit-linear-gradient(top, #fff, #000, #fff);
      background-image: -moz-linear-gradient(top, #fff, #000, #fff);
      background-image: -ms-linear-gradient(top, #fff, #000, #fff);
      background-image: -o-linear-gradient(top, #fff, #000, #fff);
      background-image: linear-gradient(top, #fff, #000, #fff);
	}

<div class="block"></div>

Answer 7

我认为您的多重 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>

Answer 8

三个 div？

<div>
   <div>
      /* ascx 1 goes here */
   </div>
   <div style="width:1px; background-color: #000"></div>
   <div>
      /* ascx 2 goes here */
   </div>
</div>