自定义复选框和标签对齐

-1

我已经创建了一个自定义复选框，其中隐藏了复选框，并且标签以自定义方式显示为checbox。一切都很好，但是当我给它一个标签时，它没有正确对齐。这里是小提琴链接自定义复选框和标签对齐

verticals alignment : middle ;

一定很成功，但它没有。有人可以帮助解决它

来源

2017-03-07 ani

但是，你在哪里要居中呢？根据哪个元素？ –

我不想将它居中..标签样式的标签必须位于复选框 – ani

旁边但是只有一个复选框。 –

如果你可以改变你的HTML代码，我建议你使用伪元素来创建自定义的复选框。

HTML

<div class="checkboxFour"> 
    <input type="checkbox" value="1" id="checkboxFourInput" name="" data-toggle="modal" data-target="#myModal" /> 
    <label for="checkboxFourInput">styled label</label> 
</div>

CSS

input[type=checkbox] { 
    visibility: hidden; 
} 

. checkboxFour { 
    width: 10px; 
    height: 10px; 
    background: #ddd; 
    margin: 20px 90px; 
    border-radius: 100%; 
    position: relative; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); 
} 

.checkboxFour label:before { 
    content: ""; 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    margin-right: 3px; 
    border-radius: 0; 
    transition: all .5s ease; 
    cursor: pointer; 
    z-index: 1; 
    background: #333; 
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5); 
} 

.checkboxFour input[type=checkbox]:checked + label:before { 
    background: #26ca28; 
} 

#boxlabel { 
    vertical-alignment: middle; 
}

这里的Jsfiddle

来源

2017-03-07 14:29:38 Fabio