CODEWITHSUNDEEP
htmlcss
CodingIntrigue
CodingIntrigue

Reputation: 78585

Add span to side of center align element

I'm trying to implement some designs in CSS, but having a bit of trouble figuring out how to align this <span> correctly.

I am trying to achieve the <input> and <button> elements being centrally aligned, but the <span> element being absolutely to the right of the <input>, example:

Required Output

It's important to make sure that the <span> does not affect the alignment of the other elements. The <input> and <button> should always be exactly in the middle of the parent.

Would be great if I could do this in CSS only. 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 Info:

Upvotes: 3

Views: 83

Answers (3)

Alex Char
Alex Char

Reputation: 33218

You can wrap your input element in span and using pseudo-element :after to create the square. No need of position absolute:

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>

After @kapantzak comment you can use position absolute 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>

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

Wrap the input and the span inside a div with position: relative and display:inline

The span .verify will get absolutely positioned, leaving the input element to it's original position (centered aligned)

By giving a top:50% and then margin-top: -10px (half of its height), it will get in the middle of it's parent 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>

Upvotes: 5

user1846747
user1846747

Reputation:

Try this... 

.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>

Upvotes: 0

Related Questions