Fügen Sie vertikale Linie mit Text dazwischen, zwischen 2 Forms

Question

Ich versuche, ein Login & Registrierungsseite style und möchte eine vertikale Linie mit dem Wort in der Mitte, wie unten gezeigt, enthalten. Ich habe schon versucht, ein div zwischen den 2 Formen zu erstellen, aber ich kämpfe mit dem Wort zwischen der Linie. Wie kann dies erreicht werden?

Was ich versucht:

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

CSS:

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

Aber dann wird die Linie „angehängt“ nach links Form, und ich kann es nicht von ihm mit Rand erhalten lose oder Rand. Ich bin mir auch nicht sicher, wie ich das Wort dazwischen machen soll.

Answer 1

C Könnten Sie bitte den Code beziehen, wird es Ihnen helfen. http://codepen.io/nehemc/pen/yJbRxb

<style> 
.wrapper { width:500px; display:inline-block; position:relative; } 
.wrapper:before { content:''; position:absolute; background:#900; width:2px; height:100%; margin: 0 auto; left:0; right:0; } 
.left { float:left; width:190px; margin-right:40px; background:#ccc; padding:20px; } 
.right { float:left; width:190px; background:#666; padding:20px; } 
input { display:block; width:100%; margin-bottom:10px; } 
.v-line { position: absolute; right: 0; top: 36%; background: white; left: 0; margin: 0 auto; text-align: center; width: 20px; height: 20px; } 
</style> 

<div class="wrapper"> 
<span class="v-line">OR</span> 
<div class="left"> 
    <form> 
    <input type="text"> 
    <input type="text"> 
    </form> 
</div> 
<div class="right"> 
    <form> 
    <input type="text"> 
    <input type="text"> 
    </form> 
</div> 
</div> 

Answer 2

Sie können 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 3

wie diese etwas tun, was das Beste ist i mit 3 Minuten kommen konnte :)

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

Hier ist eine andere Lösung, die ein :after pseudo-Element für die vertikale Linie und den Text als eine Überlagerung position: absolute Blockelement verwendet.

.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; 
 
}

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