How to center a checkbox on a div

0

I have an aside that contains 4 checkbox, so:

<aside id="filtro">
    <input type="checkbox" value="azul" class="check">Azul
    <input type="checkbox" value="verde" class="check">Verde
    <input type="checkbox" value="amarelo" class="check">Amarelo
    <input type="checkbox" value="vermelho" class="check">Vermelho
</aside>

The aside has, among others, this feature:

aside#filtro{
     text-align:center;
}

And everything was centralized, including some selects that I put. But the text that is in front of the checkbox is also centered inside the aside, thus leaving the checkboxes not vertically aligned, how do you align those 4 checkboxes?

    
asked by anonymous 31.10.2016 / 21:23

2 answers

0

Use Flexbox to structure your layout.

It looks like this:

#filtro 
{
   display:flex;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center;
} 
    
31.10.2016 / 23:44
0

Centralize

.div{
   display:flex;
   align-items:center
} 
    
26.09.2018 / 00:04