1

A ideia aqui é centralizar verticalmente o radio button com seu label (alinhados horizontalmente).

Onde estou errando?

inserir a descrição da imagem aqui

<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;  
}

1 Resposta 1

1

O problema está nessas duas linhas, retire isso do <ul>:

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

Existem várias várias maneiras de centrar verticalmente/horizontalmente elementos em CSS:

  1. https://jsfiddle.net/wgoc40bk/2/ Neste caso, mantendo a estrutura html que tem era isto que eu faria

  2. Mudando um pouco estrutura HTML, pondo os elementos a centrar numa caixa mãe, então podemos optar por esta solução: https://jsfiddle.net/wgoc40bk/5/ . Jogamos com os displays (display:table/display:table-cell) na caixa mãe (.formasPgto li) e criamos uma outra caixa mãe (<div>) para nos ajudar nesta tarefa, para agrupar os elementos a centrar. Um exemplo Simples: http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php

  3. Aproveitando a estrutura html que criamos no ponto dois podemos também optar por: https://jsfiddle.net/wgoc40bk/6/ . Também uso muito essa maneira, definindo position:relative na caixa mãe (.formasPgto li) e na caixa a centrar (div) definimos entre outras coisas a position:absolute. Aqui temos manualmente de definir uma height para a nossa <div>, senão por default a position absolute define a altura como 100%

Aconselho sempre a colocar um wrapper (caixa mãe), nestes ultimos dois casos uma div, a agrupar os elementos a centrar

PS: Só não escrevi o CSS todo aqui para não ficar muito extenso... Nesses exemplos acima tem os CSS desenvolvidos

6
  • Não entendi muito bem. Vamos lá: a caixa da ul com width: 800px height: 100px. Conteúdo interno alinhado horizontalmente: text-alig: center. Cada li com width: 250px height: 50px. vertical-align: middle. Dessa forma a li não alinha verticalmente 21/05/2016 às 16:07
  • Neste caso pode usar padding este exmplo: jsfiddle.net/wgoc40bk/2
    – Miguel
    22/05/2016 às 11:26
  • Parece que label não dá para alinhar verticalmente com vertical-align: middle. É isso mesmo? E nesse caso o recurso é usar padding? 22/05/2016 às 14:37
  • Ha vertical-align: middle daria o efeito que quer se a caixa mão tivesse display table e o elemento a centrar display: table-cell;. Vou completar a min resposta
    – Miguel
    22/05/2016 às 18:16
  • Então entendi corretamente. Alguns elementos aceitam o vertical-aligment sem display table, já outros não. Neste caso, vou preferir usar padding mesmo. Obrigado. Estou entrando no mundo tableless. 23/05/2016 às 0:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .