How can I made a vertical line with a text in center?-CodePudding

I tried to make a clone of a form which has a vertical line <span >or</span> with a text in center! So How can I make a line looks like

this form I think I might be using hr but it create a horizontal line instead of vertical bu might be if we do some css to rotate it, I don't know what is the best way of doing it. That's what I have tried so far:

* {
  box-sizing: border-box;
}

header {
  background-color: rgb(147, 88, 134);
  width: 100%;
  height: 65px;
}

.tit2 {
  float: right;
  color: white;
  margin-right: 70px;
  font-size: 20px;
  padding: 7px;
  margin-top: 10px;
}

.tit1 {
  float: left;
  color: white;
  font-weight: bold;
  font-size: 25px;
  margin-left: 100px;
  margin-top: 10px;
}

.goo {
  background-color: red;
  color: white;
  width: 200px;
  height: 50px;
}

.face {
  background-color: rgb(27, 122, 255);
  color: white;
  width: 200px;
  height: 50px;
}

.git {
  background-color: black;
  color: white;
  width: 200px;
  height: 50px;
}

.git,
.face,
.goo {
  margin: 10px;
  text-align: center;
  font-weight: bold;
  border-radius: 8px;
}

h1 {
  color: rgb(186, 183, 183);
  text-align: center;
  padding-top: 10px;
}

#login {
  background-color: rgb(147, 88, 134);
  color: white;
  text-align: center;
  border-radius: 4px;
  width: 140px;
  height: 50px;
  font-weight: bold;
  margin: 7px;
}

.botona2 {
  border: 1px solid black;
  border-radius: 2px;
  width: 250px;
  height: 50px;
  padding: 20px;
  margin: 10px;
}

.tout {
  border: 2px solid rgb(235, 235, 235);
  border-radius: 15px;
  width: 80%;
  height: 400px;
  margin: auto;
  margin-top: 80px;
  box-shadow: 5px 10px 18px 10px #dbdbdb;
}

.vertical-line {
  border-left: 2px solid #000;
  display: inline-block;
  height: 130px;
  margin-right: 20px;
}

<header>
  <p >Simo App</p>
  <p >Login</p>
</header>
<div >
  <h1>Chose a Login Method</h1><br><br>
  <div >
    <div >
      <button > Google</button><br>
      <button >Facebook</button><br>
      <button >Github</button><br>
    </div>
    <span >or</span>
    <div >
      <form>
        <label><input type="text" placeholder="Username" ></label><br>
        <label><input type="password" placeholder="Password" ></label><br>
        <label><input type="submit" value="Login" id="login"></label>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

You could make a line and position text over it using position: absolute;

.wrapper {
  position: relative;
  width: 250px;
  height: 300px;
}

.line {
  position: absolute;
    top: 0;
  bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  width: 1px;
    background-color: grey;
}

.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  text-transform: uppercase;
  padding: .5em;
  background-color: #fff;
    border: 1px solid grey;
    border-radius: 50px;
}

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

CodePudding user response：

What you need to do is a full size column (12) for the mobile version. So between the two col-sm-6 elements is this new one. Then you align everything to the center and create the circle normally. Next for SM screens or above it is necessary to do absolute positioning on the new block so that it doesn't count as the bootstrap column size. Then you insert it center-aligned with flexbox and make some changes, but in the end it's just centerings. The only thing that affects the sm-6 blocks are the new margins I inserted (pr-sm-25px and pl-sm-25px) so that the middle block doesn't invade the space of the rest of the content. There is very little screen encroachment, but this is due to the size of the already existing content, my rule is following the bootstrap grid.

Edit: This only works for two columns. As I put the absolute positioning if this grid has more columns or more items inserted (for example, 4 col-6 columns) then the positioning should be different. But I don't think this will change as it's not an incremental list.

* {
    box-sizing: border-box;
}

header {
    background-color: rgb(147, 88, 134);
    width: 100%;
    height: 65px;
}

.tit2 {
    float: right;
    color: white;
    margin-right: 70px;
    font-size: 20px;
    padding: 7px;
    margin-top: 10px;
}

.tit1 {
    float: left;
    color: white;
    font-weight: bold;
    font-size: 25px;
    margin-left: 100px;
    margin-top: 10px;
}

.goo {
    background-color: red;
    color: white;
    width: 200px;
    height: 50px;
}

.face {
    background-color: rgb(27, 122, 255);
    color: white;
    width: 200px;
    height: 50px;
}

.git {
    background-color: black;
    color: white;
    width: 200px;
    height: 50px;
}

.git,
.face,
.goo {
    margin: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
}

h1 {
    color: rgb(186, 183, 183);
    text-align: center;
    padding-top: 10px;
}

#login {
    background-color: rgb(147, 88, 134);
    color: white;
    text-align: center;
    border-radius: 4px;
    width: 140px;
    height: 50px;
    font-weight: bold;
    margin: 7px;
}

.botona2 {
    border: 1px solid black;
    border-radius: 2px;
    width: 250px;
    height: 50px;
    padding: 20px;
    margin: 10px;
}

.tout {
    border: 2px solid rgb(235, 235, 235);
    border-radius: 15px;
    width: 80%;
    height: 400px;
    margin: auto;
    margin-top: 80px;
    box-shadow: 5px 10px 18px 10px #dbdbdb;
}

.middle-block {
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: -1;
}

.middle-block-center {
    background: #fff;
    border-radius: 100%;
    border: 2px solid rgb(235, 235, 235);
    color: rgb(128, 128, 128);
    font-size: 16px;
    font-weight: 700;
    padding: 12px;
}

.middle-block-line {
    background: rgb(235, 235, 235);
    height: 2px;
    position: absolute;
    width: calc(100% - 90px);
    z-index: -1;
}

@media (min-width: 576px) {
    .middle-block {
        position: absolute;
        height: 100%;
    }

    .middle-block-center {
        padding: 14px;
        font-size: 18px;
    }

    .middle-block-line {
        height: 100%;
        width: 2px;
    }

    .pr-sm-25px {
        padding-right: 25px !important;
    }

    .pl-sm-25px {
        padding-left: 25px !important;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical line</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <p >Simo App</p>
        <p >Login</p>
    </header>
    <div >
        <h1>Chose a Login Method</h1><br><br>
        <div >
            <div >
                <button > Google</button><br>
                <button >Facebook</button><br>
                <button >Github</button><br>
            </div>
            <div >
                <div ></div>
                <div >
                    <span>OR</span>
                </div>
            </div>
            <div >
                <form>
                    <label><input type="text" placeholder="Username" ></label><br>
                    <label><input type="password" placeholder="Password" ></label><br>
                    <label><input type="submit" value="Login" id="login"></label>
                </form>
            </div>
        </div>
    </div>
</body>

</html>