【问题标题】：center vertical line between divsdiv之间的中心垂直线
【发布时间】：2014-12-17 00:53:19
【问题描述】：

我有一个名为 welcome-inputs 的 div 和另外两个 left 和 right

名为left 的div 需要位于welcome-inputs 的左侧，名为right 的div 需要位于welcome-inputs 的右侧。

左右有宽度 = 100px

需要一条位于两者中间的线，表示分离。

查看代码：http://jsfiddle.net/gn1asdmh/3/

红线必须在图片中间（图片代表左右）

【问题讨论】：

请将您的代码直接放在问题中，以方便我们。

标签： javascript jquery html css

【解决方案1】：

jsFiddle demo

在.left 和.right 之间添加一个span 元素

<span class="middleLine"></span>

CSS：

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    text-align:center; /* ADD THIS */
}
.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}
.left {
    float: left;
    /*border-right: 3px solid red; REMOVE THIS */
}
.right {
    float: right;
}
body {
    background:blue;
}

span.middleLine{
   display:inline-block;
   border-right: 2px solid red;
   margin-left:-1px; /* cause the border is 2px */
    height:100%;
}

【讨论】：

【解决方案2】：

JSFiddle

另一种解决方法。

.left {
  position:absolute;
  top: 0;
  left: 0;
}

 .right {
  position:absolute;
  top: 0;
  right: 0;
}

【讨论】：

【解决方案3】：

如果将position: relative 添加到.welcome-inputs，则可以在.left 或.right 上使用::after 或::before 伪元素，如下所示：

.left::after {
    border-right: 3px solid red;
    content: "";
    height: 100px;
    position: absolute;
    top: 0;
    left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}

并摆脱.left上的border-right

JSFiddle Here

【讨论】：

【解决方案4】：

只需在父元素上使用生成的内容。在给定的示例中没有理由为此使用结构标记。

更新小提琴，http://jsfiddle.net/gn1asdmh/26/

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    position: relative;
}
.welcome-inputs::before {
    content: '';
    display: block;
    position: absolute;
    outline: 1px solid red;
    left: 50%;
    width: 0;
    height: 100px;
}

.welcomeforms {
    color: #6B6B6B;
    margin: 0 auto;
    width: 100px !important;
}


.left {
float: left;
}

.right {
    float: right;
}

body {
    background:blue;
}

【讨论】：

【解决方案5】：

最简洁的方法是使用 HTML 表格。这将使其保持响应。试试下面的代码。

.welcome-inputs {
  width: 100%;
}
#leftInput,
#rightInput {
  width: 100px;
}
#separatorInput {
  text-align: center;
}
#dividingLine {
  display: inline-block;
  height: 100%;
  width: 5px;
  background: red;
  }

<table class="welcome-inputs">
  <tr>
    <td id="leftInput">
      <img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
    </td>
    <td id="separatorInput"><div id="dividingLine"</td>
    <td id="rightInput">
      <img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
    </td>
  </tr>
</table>

【讨论】：

【解决方案6】：

更好的是：无需使用任何空/虚拟元素。我们依靠使用伪元素来代替。在这种情况下，我将使用::before：

.welcome-inputs {
    float: none;
    margin: 0 auto;
    width: 80%;
    background:white;
    height:100px;
    position: relative; /* new property added to original one */
}
.welcome-inputs::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: red;
    left: 50%;
    transform: translateX(-50%);
}

记得在父元素上声明position: relative。在这里看小提琴：http://jsfiddle.net/teddyrised/gn1asdmh/28/

p/s：您可能希望为 transform 使用供应商前缀，以最大限度地提高跨浏览器兼容性。

【讨论】：

【解决方案7】：

要为这些答案添加一些想法，您也可以考虑：box-sizing、calc()，甚至是简单的background image/repeat/sizing

【讨论】：