I try to vertically align an input checkbox with button at its right.

Here's an example of what I get for moment :

As you can see, the 2 checkbox on the left are misaligned (a little too much high pared to buttons) with their button at right (the first input is "Player Computer" and the second one is "Player1 Player2").

With Inspector, I tried to modify padding and margin on parent div of these checkbox/buttons but no luck.

I try to vertically align an input checkbox with button at its right.

Here's an example of what I get for moment :

As you can see, the 2 checkbox on the left are misaligned (a little too much high pared to buttons) with their button at right (the first input is "Player Computer" and the second one is "Player1 Player2").

With Inspector, I tried to modify padding and margin on parent div of these checkbox/buttons but no luck.

• javascript
• jquery
• html
• css
• checkbox

• 3 Please share your code – Pankaj Gadge Commented Dec 16, 2017 at 6:45

6 Answers 6

Just remove padding from button-group class. and add vertical-align: middle; and display: inline-block; in checkbox And add below css to your code:

#formGame {
  padding-left: 0;
  pointer-events: all;
}
#formGame input[type="checkbox"] {
  vertical-align: middle;
  display: inline-block;
}
label {
  padding-left: 3px;
}
.btn-group{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
button.btn {
  padding-left: 10px;
}

.btn-classic {
  color: black;
  background-color: white;
}

.btn-inverse {
  color: white;
  background-color: black;
}

#Player1VsPlayer2 {
  margin-top: 10px;
  margin-left: 12px;
}

#PlayerVsComputer {
  margin-top: 15px;
  margin-left: 12px;
}

#PlayableHits {
  margin-top: 10px;
  margin-left: 32px;
}

<form id="formGame">
   <div id="PlayerVsComputer" class="checkbox">
    <label><input type="checkbox" class="game" style=""/>
     <div class="btn-group" role="group">
      <button type="button" class="btn btn-inverse btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player</font></font></button>
      <button type="button" class="btn btn-classic btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Computer</font></font></button>
     </div>
    </label>
   </div>
   <div id="Player1VsPlayer2" class="checkbox">
    <label><input type="checkbox" class="game">
     <div class="btn-group" role="group">
      <button type="button" class="btn btn-inverse btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 1</font></font></button>
      <button type="button" class="btn btn-classic btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 2</font></font></button>
     </div>
    </label>
   </div>
</form>

Please do the following CSS changes.

First remove padding from button-group class.

.btn-group{
    padding-top: 0px;
}

Then use the CSS3 solution display:flex. Like so.

form label{
    display:flex;
    align-items:center;
}

Another way is

Replace

<input type="checkbox" class="game">

To

<span class="btn-group"><input type="checkbox" class="game"></span>

1. The intended behaviour can be acplished by applying vertical-align to the checkbox input elements, e.g:

input.game {
    vertical-align: middle;
}

2. The padding-top property declared on the nested .btn-group elements must be removed, e.g:

#formGame .btn-group {
    padding-top: 0px;
}

3. Instead, rather offset spacing between sibling elements by declaring a margin property on the containing label elements, e.g:

#formGame label {
    margin-bottom: 10px;
}

Note: by using the unique ID attribute of the form element (#formGame) as a base selector for mon elements (label) or framework classes (.btn-group) we can ensure that these changes only apply to the intended elements.

Remove the padding and margin properties and use vertical-align instead.

You've added some unnecessary CSS that is creating the problem. This will help you get what you're looking for and it'll work on old browsers too.

.btn-group {
    padding-top: 0;
    vertical-align: text-bottom;
}

/* Get rid of vertical align on elements inside button */
button font {
    vertical-align: initial !important;
}

/* Restore whitespace removed by padding-top: 0 */
form#formGame > div {
    margin-top: 10px;
    margin-bottom: 10px;
}