CODEWITHSUNDEEP
css
hiyo
hiyo

Reputation: 131

How to align absolutely positioned text to center in line?

<div class="input-fields">
  <div class="new">
    <div class="first-container">
  <form id="new-form" method="POST">
  <div class="label">
                    <span class="fas fa-envelope icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
    <div class="label">
                    <span class="far fa-id-card icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
   <div class="label">
                    <span class="fas fa-user-tag icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
    <div>
    </div>
    </div>
</div>
    <div>
    <span class="divide">or</span>
    </div>
<div class="login-field">
  <div class="second-container">
  <div class="label">
                    <span class="far fa-id-card icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
  <div class="label">
                    <span class="fas fa-key icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
      <div>
    </div>
  </div>




.fa-arrows-alt-h {
  font-size: 30px;
  color: #bbb;
}

.input-fields {
  display: flex;
  background: #F7F9F6;
}

.new {
  width: 50%;
  float: right;
  border-right: 1px dashed #e9e9e9;
}



.form-input {
    padding-left: 3.575rem;
    height: calc(2.25rem + 2px);
    font-size: 1.5rem;
}


.first-container {
  display: inline-block;
  float: right;
  padding-right: 30px;
}

.second-container {
  display: inline-block;
  padding-left: 30px;
}

.divide {
  position: absolute;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: 20%;
}

I would like to align text, "or" in the middle of the vertical line.

I used left: 50% or 49%, however, it's broken when I shrink the window size for response test.

I couldn't use 'left:0; right: 0; because I did not know the width of text("or")

How can I align the word "or" in the middle of the vertical line?

Can anyone help, please?

Many thanks! :)

Upvotes: 0

Views: 54

Answers (2)

arnavpanwar99
arnavpanwar99

Reputation: 375

To your absolutely positioned span add these styles:

.divide{
  left: 50%;
  transform: translate(-50%);
}

It works see the codepen here: https://codepen.io/arnavozil/pen/mdVyWGr

Upvotes: 2

Laasri Nadia
Laasri Nadia

Reputation: 33

The problem you had is that u're using flexbox and at the same time you're giving the containers specific width , instead you can use justify-content : center 

.fa-arrows-alt-h {
      font-size: 30px;
      color: #bbb;
    }

    .input-fields {
      justify-content: center;
    display: flex;
      display: flex;
      background: #F7F9F6;
    }

    .new {
      /* width: 50%; */
      /* float: right; */
      border-right: 1px dashed #e9e9e9;
    }



    .form-input {
      padding-left: 3.575rem;
      height: calc(2.25rem + 2px);
      font-size: 1.5rem;
    }


    .first-container {
      /* display: inline-block; */
      /* float: right; */
      padding-right: 30px;
    }

    .second-container {
      /* display: inline-block; */
      padding-left: 30px;
    }

    .divide {
      /* position: absolute; */
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      /* top: 20%; */
    } ```

Upvotes: 0

Related Questions