CODEWITHSUNDEEP
cssmaterialize
Pedro
Pedro

Reputation: 238

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>

Upvotes: 1

Views: 73

Answers (2)

Tun
Tun

Reputation: 53

.card-panel {
 display:flex; 
}

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

Upvotes: 1

JPortillo
JPortillo

Reputation: 551

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

Upvotes: 0

Related Questions