Align Vertically Horizontally Aligned Objects

Question

The idea here is centralizar verticalmente the radio button with his label (horizontally aligned).

Where am I going wrong?

<ul class="formasPgto">

 <li>
  <input type="radio" name="pagamento" value="pagseguro" id="pagseguro" />
  <label for="pagseguro">Pag Seguro</label>
 </li>

 <li>
  <input type="radio" name="pagamento" value="boleto"  id="boleto" />
  <label for="boleto">Boleto</label>
 </li>

 <li>
  <input type="radio" name="pagamento" value="cartao" id="cartao" />
  <label for="cartao">Cartão</label>
 </li>

</ul>

CSS

.formasPgto {
  list-style: none;
  margin: 0 auto;
  padding: 0;  
  width: 800px;
  height: 100px;
  line-height: 100px;
  border: #000 .3px solid;
  text-align: center;
}

.formasPgto li {
  display: inline-block;
  width: 250px;
  height: 50px;
  border: #000 .3px solid;
  vertical-align: middle;
}

.formasPgto li label, .formasPgto li input[type=radio]  {
  display: inline-block;
  vertical-align: middle;  
}

Answer 1

The problem is in those two lines, take it out of the <ul>:

...
line-height:100px;
...

There are several ways to center vertically/horizontally elements in CSS:

1. https://jsfiddle.net/wgoc40bk/2/ In this case, keeping the html structure you have is what I would do

2. Changing a little HTML structure, putting the elements to center on a parent box, so we can opt for this solution: https://jsfiddle.net/wgoc40bk/5/ . We play with the displays (display:table/display:table-cell) in the mother box (.formasPgto li) and create another mother box (<div>) to help us in this task, to group the elements to center. A Simple Example: http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php

3. Taking advantage of the html structure we created at point two we can also choose to: https://jsfiddle.net/wgoc40bk/6/ . I also use this way a lot, defining position:relative in the mother box (.formasPgto li) and the box to be centred (div) we define among other things the position:absolute. Here we manually define a height for our <div>, else by default position Absolute sets the height to 100%

I always recommend to put a wrapper (mother box), in these last two cases a div, to group the elements to be centred

PS: I just haven’t written the whole CSS here so it doesn’t get too long... In these examples above CSS has been developed