垂直對齊單選按鈕旁邊的文本

這是一個基本的CSS問題，我有一個單選按鈕，後面有一個小文本標籤。我希望文本垂直居中顯示，但文本始終與我的情況下單選按鈕的按鈕對齊。垂直對齊單選按鈕旁邊的文本

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

這裏是一個的jsfiddle：

http://jsfiddle.net/UnA6j/

有什麼建議？

謝謝，

Alan。

來源

2013-07-25 Alan A

http://jsfiddle.net/UnA6j/5/ – Prasanth

你應該使用''一個標籤，而不是一個段落。 – Musa

使用它label內。使用vertical-align將其設置爲不同的值 - bottom，baseline，middle等

http://jsfiddle.net/UnA6j/5/

來源

2013-07-25 11:56:50 Prasanth

謝謝...我仍然無法讓它對齊看到我更新的代碼與標籤.. http://jsfiddle.net/UnA6j/5/ –

好吧我得到它的工作，我擺弄你的代碼，並調整了廣播ipnut有一個負的頂部邊緣，將其向上移動，以便對齊精確。負邊際接受練習，感覺不對！ http://jsfiddle.net/UnA6j/5/ –

尼斯..我不認爲負利潤率是一個問題..如果它是跨所有瀏覽器工作，這是很好去..是規範 – Prasanth

習慣了這種

input[type="radio"]{ 
    vertical-align:top; 
    } 
p{ 
    font-size:10px;line-height: 18px; 
}

Demo

來源

2013-07-25 11:55:14

您可以嘗試類似;

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

並給出跨度邊緣像頂部;

span{ 
    margin-top: 4px; 
    position:absolute; 
}

這裏是小提琴http://jsfiddle.net/UnA6j/11/

來源

2013-07-25 12:03:38

我需要使用相對而非絕對字體大小的跨瀏覽器放置，這會產生不同大小的文本在不同的瀏覽器中。你的文章給了我在ems中使用負邊界值來補償的想法，這有效！ – grw

謝謝@grw。考慮加我的答案，如果它適用於你:) –

我已經做了，謝謝:-) – grw

我覺得這是你可能會問什麼

http://jsbin.com/ixowuw/2/

CSS

label{ 
    font-size:18px; 
    vertical-align: middle; 
} 

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

HTML

<span> 
    <input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> 
    <label>Decimal</label> 
</span>

來源

2013-07-25 12:25:03

@ Rahul-Thakus謝謝你的代碼給我同樣的問題..文本與基線對齊.... –

確保它沒有被其他父項屬性覆蓋，順便說一句你使用的是什麼瀏覽器？ –

@ Rahul-Thakus我使用的是Chrome，但在IE9中它看起來很好.... –

您需要對齊文本使用浮動單選按鈕的左邊：左

input[type="radio"]{ 
float:left; 
}

您可以使用標籤過於更多的響應輸出。

來源

2013-07-25 12:31:38

HTML：

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS：

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

來源

2015-11-04 05:31:35

您也可以嘗試這樣的事：

input[type="radio"] { 
 
    margin-top: -1px; 
 
    vertical-align: middle; 
 
}

<label class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label> 
 
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>

來源

2016-06-19 14:20:12 oliviasteger

簡單和短期的解決方案添加以下樣式：

style="vertical-align: text-bottom;"

來源

2016-09-16 10:02:50 Vasant

這將給死在對準

input[type="radio"] { 
    margin-top: 1px; 
    vertical-align: top; 
}

來源

2017-02-02 19:34:57 Nils

input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

根據需要單選按鈕的精確對準只需調整頂部和底部或複選框

<input type="radio" class="radio">

來源

2017-03-14 16:56:10 Kickenback61

垂直對齊單選按鈕旁邊的文本

回答

相關問題