4

O resultado desse meu form coloca os checkbox e labels em linha, o que está correto, mas não consigo achar uma classe do bootstrap que faça o label alinhas com o checkbox.

Como eu faço isso?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/video/genresfilter" method="post" class="form-inline">

<label><input id="Check1" name="Check1" type="checkbox" value="Check1">Check1</input></label>

<label><input id="Check2" name="Check2" type="checkbox" value="Check2">Check2</input></label>
                                                                                            
<label><input id="Check3" name="Check3" type="checkbox" value="Check3">Check3</input></label>
                                                                                              
</form>

ATUALIZANDO

inserir a descrição da imagem aqui

A foto acima é o resultado atual, quero que a caixa do checkbox fique alinhada com a label Checkbox1, no resultado atual parece que a caixa está alinhada acima e precisaria ficar centralizada.

O centro da caixa deve coincidir com o centro da letra "C" da palavra Checkbox...

4
  • Alinhar verticalmente? Commented 29/11/2015 às 16:50
  • Horizontal, manda executar o código que vai aparecer eles na horizonta sem alinhar.
    – Ricardo
    Commented 29/11/2015 às 16:51
  • 1
    Desculpe pela lerdeza, mas ainda não o compreendi. Você pode fazer uma imagem simulando o que você deseja? Commented 29/11/2015 às 16:54
  • Coloquei a imagem do resultado atual, o resultado esperado eu não consigo fazer (por isso perguntei rsrs). Mas expliquei mais detalhado o que eu quero. Ve se da para entender agora.
    – Ricardo
    Commented 29/11/2015 às 16:58

1 Resposta 1

3

Veja se isso lhe serve:

label {
    display: inline-block;
}
input {
    padding: 0;
    margin:0;
    vertical-align: center;
    position: relative;
    top: 1px;
    overflow: hidden;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/video/genresfilter" method="post" class="form-inline">

<label><input id="Check1" name="Check1" type="checkbox" value="Check1">Check1</label>

<label><input id="Check2" name="Check2" type="checkbox" value="Check2">Check2</label>
                                                                                            
<label><input id="Check3" name="Check3" type="checkbox" value="Check3">Check3</label>
                                                                                              
</form>

Retirei os "fechamentos" das input.

1
  • Ficou legal, mas muda o top para 2px, fica melhor com 2 de top, obrigado!
    – Ricardo
    Commented 29/11/2015 às 17:29

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 .