Wie wird der vertikale Text rechts neben einem Kontrollkästchen ausgerichtet?
input[type="checkbox"] {
display: none;
}
span:before {
font-family: "FontAwesome";
font-style: normal;
content: 'O';
margin-right: 3px;
font-size: 30px;
}
input[type="checkbox"]:checked ~ span:before {
content: 'Z';
}<label>
<input type="checkbox"/>
<span>Text</span>
</label>Sie können die folgenden in das span:before Element hinzufügen:
span:before {
vertical-align: middle;
position: relative;
}
Sie display: flex und align-items: center auf span Element verwenden können.
span {
display: flex;
align-items: center;
}
input[type="checkbox"] {
display: none;
}
span:before {
font-family: "FontAwesome";
font-style: normal;
content: 'O';
margin-right: 3px;
font-size: 30px;
}
input[type="checkbox"]:checked ~ span:before {
content: 'Z';
}<label>
<input type="checkbox" />
<span>Text</span>
</label>Ahh Ich habe versucht, dies zu beantworten, habe es aber falsch gemacht, indem ich' flex' auf '
Das Hinzufügen von 'vertical-align: middle' zu': before' macht dasselbe. – Rob
die display der Spanne zu flex Einstellung und die Elemente center funktionieren würde ausrichten.
input[type="checkbox"] {
display: none;
}
label span {
display: flex;
align-items: center;
}
span:before {
font-family: "FontAwesome";
font-style: normal;
content: 'O';
margin-right: 3px;
font-size: 30px;
}
input[type="checkbox"]:checked ~ span:before {
content: 'Z';
}<label>
<input type="checkbox"/>
<span>Text</span>
</label>Fügen Sie einfach vertical-align: sub zu überspannen: vor
Hier js Geige Link ist - Fiddle
span:before {
font-family: "FontAwesome";
font-style: normal;
content: 'O';
margin-right: 3px;
font-size: 30px;
vertical-align:sub;
}
Fügen Sie einfach
vertical-align:middle;
zu
span:before {
font-family: "FontAwesome";
font-style: normal;
content: 'O';
margin-right: 3px;
font-size: 30px;
vertical-align:middle;
}
Dies ist die einfachste und korrekteste Antwort, die in allen Browsern funktioniert, ohne auf die Verfügbarkeit von Flex angewiesen zu sein, wie zu viele Leute heutzutage sofort für alles springen. – Rob
wenn Sie fügen 'top: 5px; position: relativ; 'zu' span: vor 'sollte es gut sein – Banzay