如何使文字垂直對齊複選框旁邊的中心？

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>

什麼辦法可以使中間文字CSS內容下？

來源

2017-02-16 Dreams

如果添加'頂：5px的; position：relative;'to'span：before'it should llok well – Banzay

您可以添加以下到span:before元素：

span:before { 
    vertical-align: middle; 
    position: relative; 
}

來源

2017-02-16 10:40:04 Treeindev

可以span元素上使用display: flex和align-items: center。

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>

來源

2017-02-16 10:40:07

Ahh我試圖回答這個問題，但是在''上使用'flex'做錯了。幹得好 – AymDev

只需在'：before'前添加'vertical-align：middle'即可完成同樣的任務。 – Rob

設置跨度display到flex和調整的項目center會工作。

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>

來源

2017-02-16 10:41:58

只需添加垂直對齊：次跨越：前

這裏是JS小提琴鏈接 - Fiddle

span:before { 
font-family: "FontAwesome"; 
font-style: normal; 
content: 'O'; 
margin-right: 3px; 
font-size: 30px; 
vertical-align:sub; 
}

來源

2017-02-16 10:43:56

只需添加

 

    vertical-align:middle;

到

 

    span:before { 
     font-family: "FontAwesome"; 
     font-style: normal; 
     content: 'O'; 
     margin-right: 3px; 
     font-size: 30px; 
     vertical-align:middle; 
    }

來源

2017-02-16 10:44:03 geeksamu

這是最簡單也是最正確的答案，它可以在所有瀏覽器中工作，而不依賴於flex的可用性，因爲太多人立即跳到現在的一切。 – Rob

如何使文字垂直對齊複選框旁邊的中心？

回答

相關問題