明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

復選框與單選框與文字水平垂直居中對齊的處理方法

發(fā)表時間：2023-12-25 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]checkbox和radio兩個標簽都是我們經(jīng)常會用到的，有時候項目中出現(xiàn)了一個checkbox與同一行的文字不能對齊的問題，檢查后發(fā)現(xiàn)個問題，checkbox和radio兩個標簽的默認高寬都是13px，而項目中使用的字體大小卻是12px，如果將字體調(diào)整為14px就不存在這個問題了，于是作者根據(jù)網(wǎng)...
checkbox和radio兩個標簽都是我們經(jīng)常會用到的，有時候項目中出現(xiàn)了一個checkbox與同一行的文字不能對齊的問題，檢查后發(fā)現(xiàn)個問題，checkbox和radio兩個標簽的默認高寬都是13px，而項目中使用的字體大小卻是12px，如果將字體調(diào)整為14px就不存在這個問題了，于是作者根據(jù)網(wǎng)上查到的資料整理了幾種解決辦法。

先發(fā)一下具體的問題情況以及解決后的效果：

11.jpg

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{font-size:12px;}
div{float:left;width:110px;}
input{margin:0;padding:0;}
.input1{vertical-align:text-bottom;margin-bottom:-1px;*margin-bottom:-4px;}
.input2{height:13px;vertical-align:text-top;margin-top:0;}
.input3{height:15px;vertical-align:bottom;margin-bottom:-1px;margin-bottom:-2px\9;*margin-bottom:0px;}
.input4{height:14px;vertical-align:top;margin-top:1px;margin-top:0\9;}
.input5{vertical-align:middle;margin-top:-2px;}
.input6{vertical-align:-3px;}
</style>
</head>
<body>
<h2>一般的情況</h2>
<p><input type="checkbox" />復選框&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" />單選框</p>
<div>
<h2>單選框</h2>
<p><input type="radio" class="input1"/>解決方法一</p>
<p><input type="radio" class="input2"/>解決方法二</p>
<p><input type="radio" class="input3"/>解決方法三</p>
<p><input type="radio" class="input4"/>解決方法四phpernote.com</p>
<p><input type="radio" class="input5"/>解決方法五</p>
<p><input type="radio" class="input6"/>解決方法六</p>
</div>
<div>
<h2>復選框</h2>
<p><input type="checkbox" class="input1"/>解決方法一</p>
<p><input type="checkbox" class="input2"/>解決方法二</p>
<p><input type="checkbox" class="input3"/>解決方法三</p>
<p><input type="checkbox" class="input4"/>解決方法四</p>
<p><input type="checkbox" class="input5"/>解決方法五</p>
<p><input type="checkbox" class="input6"/>解決方法六</p>
</div>
</body>
</html>

兼容瀏覽器：chrome，firefox，ie8，ie7，ie6，safari

備注：個人推薦第 2 種，第 5 種和第 6 種方法。因為這 3 種方法都沒有用到 css hack。

以上內(nèi)容就是復選框和單選框與文字水平垂直居中對齊的解決方法，希望能幫助到大家。

相關(guān)推薦：

推薦11款jQuery開發(fā)的復選框和單選框美化插件_jquery

HTML復選框和單選框 checkbox和radio事件介紹_基礎(chǔ)知識

自學篇之js 提取復選框和單選框的值 和純css的3D按鈕

以上就是復選框和單選框與文字水平垂直居中對齊的解決方法的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。