将标签与复选框和文本水平对齐

Question

我试图对齐复选框，以便复选框彼此对齐。现在，文本彼此对齐。我希望它水平位于中间，然后复选框彼此直接对齐。

<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/

下面是它的外观示例，复选框未彼此对齐。

格茨·威廉

Answer 1

如果您需要将标签居中对齐，并且复选框呈直线(位于左侧(，则方法会有所不同。

检查小提琴。

我不认为在视觉上这是显示列表的好方法。您还需要为列表设置固定宽度。

.

.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>