Html 如何在div的中心放置一条垂直线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1179928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I put a vertical line down the center of a div?
提问by Hcabnettek
How do I put a vertical line down the middle of a div? Maybe I should put two divs inside the div and put a left border on one and a right border on the other? I have a DIV tag and I need to put one ascx on the left (that will get swapped out from time to time with another ascx) and then a static ascx on the left. Any ideas on how I should do this? Maybe I answered my own question.
如何在div的中间放置一条垂直线？也许我应该在 div 里面放两个 div，然后在一个 div 上放左边框，在另一个上放右边框？我有一个 DIV 标签，我需要在左边放一个 ascx（它会不时与另一个 ascx 交换），然后在左边放一个静态 ascx。关于我应该如何做到这一点的任何想法？也许我回答了我自己的问题。
Any pointers would be great
任何指针都会很棒
回答by ddjikic
Maybe this can help you
也许这可以帮助你
.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>Here's is a JSFiddledemo.
这是一个JSFiddle演示。
回答by jnowland
Although this question was asked 9yrs ago and a lot of the answers would "work". CSS has evolved and you can now do it in a single line without using calc.
尽管这个问题是在 9 年前提出的，而且很多答案都会“起作用”。CSS 已经发展，您现在可以在一行中完成，而无需使用calc.
One liner (2018) answer:
一个班轮（2018）答案：
background: linear-gradient(#000, #000) no-repeat center/2px 100%;
background: linear-gradient(#000, #000) no-repeat center/2px 100%;
How this works
这是如何工作的
linear-gradient(#000, #000)this creates abackground-imageso we can later usebackground-sizeto contain it.no-repeatthis stops the gradient from repeating when we do putbackground-sizeon it.center- this is thebackground-positionthis is where we put the "diving line"/2px 100%- this is making the image 2px wide and 100% of the element you put it in.
linear-gradient(#000, #000)这将创建一个，background-image以便我们以后可以background-size用来包含它。no-repeat当我们穿上background-size它时，这会阻止渐变重复。center- 这就是background-position我们放置“潜水线”的地方/2px 100%- 这使图像宽度为 2px，并且是您放入的元素的 100%。
This is the extended version:
这是扩展版本：
background-image: linear-gradient(#000, #000);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
回答by Samuel Neff
Here's a more modern way to draw a line down a div. Just takes a little css:
这是一种更现代的在 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>Works in all modern browsers. http://caniuse.com/#search=linear-gradient
适用于所有现代浏览器。http://caniuse.com/#search=linear-gradient
回答by Samuel Neff
Just tested this; works:
刚刚测试了这个；作品：
<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>
回答by aje
This is my version, a gradient middle line using linear-gradient
这是我的版本，渐变中线使用 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>回答by easement
I think you need a wrapper div with a background image. If not, then you are not guaranteed to have the border go all the way from the top to the bottom.
我认为您需要一个带有背景图像的包装 div。如果没有，则不能保证边框从顶部一直延伸到底部。
<div class="wrapper">
<div>Float this one left</div>
<div>float this one right</div>
</div>
*be sure to leave the space between the left and right for the image to show up.
*请务必在左右之间留出空间以显示图像。
you'll need a style that looks like:
你需要一个看起来像这样的样式：
.wrapper{background:url(img.jpg) 0 12px repeat-y;}
回答by Ryan Brunner
I think your multiple DIV approach is going to be the sanest way to approach this:
我认为你的多 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>
回答by Supertux
Three divs?
三个div？
<DIV>
<DIV>
/* ascx 1 goes here */
</DIV>
<DIV style="width:1px; background-color: #000"></DIV>
<DIV>
/* ascx 2 goes here */
</DIV>
</DIV>
