Add spacing towards the center alignment element
I'm trying to implement some constructs in CSS, but with a little bit of trouble figuring out how to properly align this one <span>
.
I'm trying to reach <input>
and centered<button>
elements , but the element is absolutely to the right of , for example:<span>
<input>
It's important to make sure it <span>
doesn't affect the alignment of other elements. <input>
and <button>
should always be exactly in the middle of the parent.
It would be great if I could only do this in CSS. This is what I have so far:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: block;
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0; /* Not sure how to calculate these? */
right: 0; /* Input.X + Input.Width + 15px ?? */
}
<div>
<input placeholder="Enter code" maxlength="8" size="8"/><br />
<span class="verify"></span>
<button>Register</button>
</div>
Additional Information:
- It should only work in Chrome
- I can make all elements fixed width if required
- I can make DOM changes if required
- I'd rather not hardcode the X / Y coordinates for
<span>
... I might want to resize the input / button later
source to share
Wrap the input and range inside a div with position: relative
anddisplay:inline
The span .verify
will be fully set, leaving the input element in its original position (centered)
Giving top:50%
and then margin-top: -10px (half of its height)
, he will be in the middle of that parental height.
.wrp {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
.inpWrp {
display: inline;
position:relative;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: block;
width: 20px;
height: 20px;
background: red;
position: absolute;
margin-top: -10px;
top: 50%; /* Not sure how to calculate these? */
right: -20px; /* Input.X + Input.Width + 15px ?? */
}
<div class="wrp">
<div class="inpWrp">
<input placeholder="Enter code" maxlength="8" size="8"/>
<span class="verify"></span>
</div>
<br />
<button>Register</button>
</div>
source to share
You can wrap your input element in span
and use a pseudo element :after
to create a square. No need for absolute position:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
vertical-align: middle;
}
.verify:after {
content: "";
width: 20px;
height: 20px;
background: red;
display: inline-block;
vertical-align: middle;
}
<div>
<span class="verify">
<input placeholder="Enter code" maxlength="8" size="8"/>
</span>
<br />
<button>Register</button>
</div>
Following @kapantzak's comment, you can use absolute position like:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify:after {
content: "";
width: 20px;
height: 20px;
background: red;
display: inline-block;
position: absolute;
top: 17px;
}
<div>
<span class="verify">
<input placeholder="Enter code" maxlength="8" size="8"/>
</span>
<br />
<button>Register</button>
</div>
source to share
Try it...
.main_container {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: inline-block;
width: 20px;
height: 20px;
background: red;
position: relative;
top: 2px;
left: 10px;
}
<div class="main_container">
<div><input placeholder="Enter code" maxlength="8" size="8"/>
<span class="verify"></span></div>
<button>Register</button>
</div>