CODEWITHSUNDEEP
htmlcss
MarksCode
MarksCode

Reputation: 8584

Vertically align text next to checkbox

I'm trying to put a checkbox with some text next to it to explain what the checkbox does. I want to make both their position absolute since their wrapper div has other things inside.

Although I put both of their top to the same value the checkbox appears to be higher up than the text.

I made a jsfiddle to explain what I mean: https://jsfiddle.net/9jx5t4xL/.

Should I just set the top of the checkbox a bit bigger than the text or is there a better way to align them vertically?

Upvotes: 0

Views: 693

Answers (2)

Abhishek
Abhishek

Reputation: 316

change your css of 

p{
      position: absolute;
      top: 40%;
      display: inline-block;
      left: 5%;
    }


#wrapper {
  height: 200px;
  width: 250px;
  border: 1px solid red;
  position: relative;
}

p{
  position: absolute;
  top: 40%;
  display: inline-block;
  left: 5%;
}

input{
  position: absolute;
  top: 50%;
  display: inline-block;
  left: 70%;
}
<div id="wrapper">
  <p>Caption for input</p>
  <input type="checkbox"/>
</div>

Upvotes: 0

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Using position and with % values wont be a good option instead of that you can use awesome flexbox layouts to easily achieve that as:

Code Snippet:

#wrapper {
  height: 200px;
  width: 250px;
  border: 1px solid red;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 24em;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
label {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}
input {
  margin: 0;
  vertical-align: middle;
}
<div id="wrapper">
  <label>Caption for input
    <input type="checkbox" />
  </label>
</div>

Upvotes: 1

Related Questions