How to place a text in the middle of a login page?-CodePudding

How do I place an OR text in the middle vertically in between the QR code and the login form?

Hope someone here can help out. thanks

here are the codes that I have:

<div style={{backgroundImage:`url("/assets/images/bg-registration-form-1_old1.jpg")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center',
     backgroundSize: 'cover',}}>
      <main className="d-flex align-items-center min-vh-100 py-3 py-md-0">
        <div className="container">
          <div className="card login-card">
            <div className="row no-gutters">
              <div className="col-md-5" style={{backgroundColor:"#0d6efd",padding:"2.2rem"}}>
                <img src="/assets/images/qrcode.png"  alt="login" className="login-card-img" />
              </div>
              <div className="col-md-7">
                <div className="card-body">
                  <div className="brand-wrapper">
                    <img src="/assets/images/logo.svg" alt="logo" className="logo" />
                  </div>
                  <p className="login-card-description">Sign into your account.</p>
                  <form action="#!">
                    <div className="form-group">
                      <label htmlFor="email" className="sr-only">Email</label>
                      <input type="email" name="email" id="email" className="form-control" placeholder="Email address" />
                    </div>
                    <div className="form-group mb-4">
                      <label htmlFor="password" className="sr-only">Password</label>
                      <input type="password" name="password" id="password" className="form-control" placeholder="***********" />
                    </div>
                    <input name="login" id="login" className="btn btn-block login-btn mb-4" type="button" defaultValue="Login" />
                  </form>
                  <a href="#!" className="forgot-password-link">Forgot password?</a>
                  <p className="login-card-footer-text">&nbsp;</p>
                  <nav className="login-card-footer-nav">
                    <a href="#!">&nbsp;</a>
                    <a href="#!">&nbsp;</a>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      </div>

CodePudding user response：

You could use ::after :

body {
  margin: 0px;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.qrcode, .login {
  width: 50%;
  height: 100%;
}

.qrcode {
  background-color: blue;
}

.login {
  background-color: red;
}

.qrcode::after {
  content: "OR";
  background-color: green;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  text-align: center;
  top: 48%;
  right: 48%;
  padding-top: 5px;
  box-sizing: border-box;
}

<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

I have added a very basic way to solve this issue, using position realtive. Add a div inside the right div here I have given name main. Give position:relative; top:45%; thats it. Place it where ever you want.

.contain{
  width:100vw;
  height:100vh;
  background: #000;
  display:flex;
  flex-wrap:wrap;;
}
.first{
  width:50vw;
  height:100vh;
  background: tomato;
}
.second{
  width:50vw;
  height:100vh;
  background: dodgerblue;
}
.main{
  position:relative;
  top:40%;
  left:-25px;
  height:50px;
  width:50px;
  text-align:center;
  color:white;
  background: black;
  border-radius:50%;;
  overflow:hidden;
}
.main p{
  margin-top: 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div >
    <div >
      
    </div>
    <div >
      <div >
        <p>OR</p>
      </div>
    </div>
  </div>

</body>
</html>