Materialize align

How can I align the materialize components vertically? The components are not centered at the same height as the button ...

https://codepen.io/pedroxavi/pen/yQVEaJ

<div class="card-panel">

<label>
    <input type="checkbox" id="chkPessoaFisica" name="chkPessoaFisica" class="filled-in" checked="checked">
    <span>Pessoa Física</span>
</label>
<label>
    <input type="checkbox" id="chkPessoaJuridica" name="chkPessoaJuridica" class="filled-in" checked="checked">
    <span>Pessoa Jurídica</span>
</label>
<label>
    <input type="checkbox" id="chkStatusAtivo" name="chkStatusAtivo" class="filled-in" checked="checked">
    <span>Ativo</span>
</label>
<label>
    <input type="checkbox" id="chkStatusInativo" name="chkStatusInativo" class="filled-in" checked="checked">
    <span>Inativo</span>
</label>

<button id="pesquisar" class="btn-small" type="submit" asp-action="LoadData">
    Pesquisar
    <i class="material-icons right">search</i>
</button>

2 answers

  • answered 2018-11-12 19:48 JPortillo

    The issue is that the label is shorter than the rendered button. So you need to make them taller, and make sure their contents are aligned to in the middle. The CSS below should do the trick.

    div > label {
      height: 32.4px;
      vertical-align: middle;
    }
    

  • answered 2018-11-12 23:32 Tun

    .card-panel {
     display:flex; 
    }
    

    this will set the height of the labels to the height of the button