实现对齐

Question

如何垂直对齐实体化组件？组件未与按钮居中位于同一高度...

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>

Answer 1

.card-panel {
 display:flex; 
}

这会将标签的高度设置为按钮的高度

Answer 2

问题是标签比渲染的按钮短。因此，您需要使它们更高，并确保其内容与中间对齐。下面的CSS应该可以解决问题。

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