在前端開發(fā)中，我們經(jīng)常會使用label進行表單元素的描述，但label默認的顯示方式可能會有些不符合我們的需求，比如說居中顯示。下面是通過使用jQuery實現(xiàn)label居中顯示的方法。
<style>label {
position: absolute; /*設(shè)置為絕對定位*/
left: 50%; /*水平居中*/
top: 50%; /*垂直居中*/
transform: translate(-50%,-50%); /*移動自身寬高的一半*/
}
</style><body><div><label>name</label><input type="text"></div></body><script>$(function() {
$('label').css({
'margin-left': -$('label').outerWidth() / 2, //減去自身寬度的一半
'margin-top': - $('label').outerHeight() / 2 //減去自身高度的一半
});
});
</script>在上面的代碼中，我們首先給label設(shè)置了絕對定位，然后通過設(shè)置left和top屬性使其水平和垂直居中，最后通過transform屬性移動label自身寬高的一半，使其完全居中。但這樣label的位置是相對于父元素而言的，而不是相對于表單元素，所以我們要在JS中再加上margin的計算，將label的位置調(diào)整到正確的位置。
通過上面的代碼，我們就能夠?qū)崿F(xiàn)label的居中顯示了。如果有多個表單元素，我們只需要將代碼套用到每個label上，同時根據(jù)需要適當?shù)卣{(diào)整樣式即可。