checkbox和後面文字無法居中對齊的解決方案

aerchi發表於2016-04-15

在製作前端頁面時，表單的頁面中有時會存在表單元素與提示文字無法對齊的問題。


下面是針對這一問題的解決方案：

先上結果圖看效果,吼吼~
checkbox和後面文字無法居中對齊的解決方案

    最上面兩個是經過css處理後的效果，已經居中對齊了哦~，最後一個是沒有處理的效果，明顯沒有對齊。解決的關鍵是vertical-align：middle屬性，一定要給input標籤和文字的標籤同時加上該屬性。對於純英文的內容而言，這樣就可以了，但是對於包含中文內容的，如果此時仍沒有居中對齊，就需注意一下字型的設定了。經過測試，當把字型設定為Arial或Tahoma後，問題解決。下面是例子的原始碼：

例子的html程式碼
checkbox和後面文字無法居中對齊的解決方案
css程式碼

checkbox和後面文字無法居中對齊的解決方案


//radio

input[type="radio"]{
vertical-align: bottom;
}

//checkbox
input[type="checkbox"]{
vertical-align: middle;
}


樂意黎

文章地址：http://blog.csdn.net/aerchi/article/details/51163467

相關文章