在两个表单之间添加带文本的垂直线

Question

我试图设计一个Login＆amp; amp;注册页面，并希望在中间包含一个带有单词的垂直线，如下所示。 我已经尝试在两种形式之间创建一个div，但我在这一行之间挣扎着这个词。 如何实现这一目标？

我尝试了什么：

<div class="verticalline">
  <form>
  </form>
</div>

CSS：

.verticalline{
border right: 1px solid black;
}

但是这条线是＆＃34;附加＆＃34;在左边的表格中，我无法通过边距或边框将其松散。我也不确定如何在两者之间做这个词。

Answer 1

你可以做这样的事情https://jsfiddle.net/7ku7qvfx/10/

.verticalline{
    width: calc(50% - 1px);
    border-right: 1px solid black;
    height: 400px;
    position: relative;
}
p{
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: -10px;
  background: white;
}

Answer 2

请您参考代码，它会对您有所帮助。 http://codepen.io/nehemc/pen/yJbRxb

c:\dev

Answer 3

这是我能在3分钟内得出的最好的结果：）

form{
  float:left;
  height:100px;
  padding:0 20px;
}

.vertical-line{
  float:left;
  height:100px;
  width:1px;
  border-right:1px solid red;
}

.vertical-line span{
  display:block;
  background:white;
  padding:10px;
  margin: 30px -20px;
  z-index:10;
}

<form>  
  user <input type='text'><br>
  pass <input type='password'>
</form>

<div class="vertical-line"><span>text</span></div>

<form>  
  user <input type='text'><br>
  pass <input type='password'>
</form>

Answer 4

这是另一个解决方案，使用:after伪元素作为垂直线，文本作为重叠position: absolute块元素。

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  height: 200px;
  text-align: center;
}

.wrapper:after {
  content: " ";
  position: absolute;
  left: 50%;
  height: 100%;
  border-left: 1px solid black;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 5px;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

＆＃13;

<div class="wrapper">
  <div class="text">Your Text</div>
</div>

＆＃13;

＆＃13;

＆＃13;