Horizontal align label with checkbox and text

Question

Im trying to align the checkboxes so the checkboxes will be aligned under each other. Now the text is aligned under each other. I would like it to be horizontally in the middle, but then with the checkboxes aligned straight under each other.

<ul class="berocket_aapf_widget  " data-scroll_theme="dark" style="display: block;">
    <li class="">
        <span>
            <input id="checkbox_44" class="checkbox_44" type="checkbox" data-term_id="44" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_44" class="berocket_label_widgets"> Blauw</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_47" class="checkbox_47" type="checkbox" data-term_id="47" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_47" class="berocket_label_widgets"> Rood</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_48" class="checkbox_48" type="checkbox" data-term_id="48" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_48" class="berocket_label_widgets"> Roze</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_82" class="checkbox_82" type="checkbox" data-term_id="82" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_82" class="berocket_label_widgets"> Wit</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_83" class="checkbox_83" type="checkbox" data-term_id="83" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_83" class="berocket_label_widgets"> Zwart</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_84" class="checkbox_84" type="checkbox" data-term_id="84" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_84" class="berocket_label_widgets"> Groen</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_86" class="checkbox_86" type="checkbox" data-term_id="86" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_86" class="berocket_label_widgets"> Multicolor</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_10107" class="checkbox_10107" type="checkbox" data-term_id="10107" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_10107" class="berocket_label_widgets"> Taupe</label>
        </span>
    </li>
            <li class="berocket_widget_show_values" style="display: none;">Show value<span class="show_button"></span></li>
</ul>

https://jsfiddle.net/44d9nqne/

Here is an example of what it looks like, the checkboxes are not aligned under each other.

Grtz Willem

Answer 1

If you need to have your labels as center aligned and the checkboxes in a straight line (which would be on your left side) the approach is different.

Check fiddle.

I don't think visually it's a good way to show the list. You will need to have fixed width for the list too.

.

.berocket_aapf_widget {
  display: block;
  width: 150px;
  margin: auto; 
}
.berocket_aapf_widget span{
  display: inline-block;
  width: 100%;
}
.berocket_aapf_widget label{
  text-align: center;
display: inline-block;
width: 85%;
}

<ul class="berocket_aapf_widget  " data-scroll_theme="dark" style="display: block;">
        <li class="">
            <span>
                <input id="checkbox_44" class="checkbox_44" type="checkbox" data-term_id="44" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_44" class="berocket_label_widgets"> Blauw</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_47" class="checkbox_47" type="checkbox" data-term_id="47" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_47" class="berocket_label_widgets"> Rood</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_48" class="checkbox_48" type="checkbox" data-term_id="48" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_48" class="berocket_label_widgets"> Roze</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_82" class="checkbox_82" type="checkbox" data-term_id="82" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_82" class="berocket_label_widgets"> Wit</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_83" class="checkbox_83" type="checkbox" data-term_id="83" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_83" class="berocket_label_widgets"> Zwart</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_84" class="checkbox_84" type="checkbox" data-term_id="84" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_84" class="berocket_label_widgets"> Groen</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_86" class="checkbox_86" type="checkbox" data-term_id="86" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_86" class="berocket_label_widgets"> Multicolor</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_10107" class="checkbox_10107" type="checkbox" data-term_id="10107" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_10107" class="berocket_label_widgets"> Taupe</label>
            </span>
        </li>
                <li class="berocket_widget_show_values" style="display: none;">Show value<span class="show_button"></span></li>
    </ul>