0
Je n'arrive pas à aligner mes étiquettes au milieu des cases à cocher. J'ai essayé tout ce qu'il me semblait et après des heures de tests, j'abandonne finalement.Cases à cocher personnalisées, alignement de l'étiquette au milieu
J'ai testé avec display: inline-block, vertical-align: middle; mais rien ne semble fonctionner. J'ai cependant découvert que mettre des caractères dans content:'' fait flotter le texte.
Je pense que je manque quelque chose ...
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 0px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>
Merci, cela semble fonctionner :) – John