How to align absolutely positioned text to center in line? - css

Question

<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! :)

Answer 1

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

Answer 2

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%; */
} ```