Làm cách nào để căn chỉnh theo chiều dọc một nút radio html với nhãn của nó?

Tôi có một biểu mẫu có các nút radio nằm trên cùng một dòng với nhãn của chúng. Tuy nhiên, các nút radio không được căn chỉnh theo chiều dọc với nhãn của chúng như được hiển thị trong ảnh chụp màn hình bên dưới.

Làm cách nào để căn chỉnh theo chiều dọc các nút radio với nhãn của chúng?

Biên tập:

Đây là mã html:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

Và mã css:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Thử cái này:

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

input {
    display: table-cell;
    vertical-align: middle
}

Đặt lớp cho tất cả đài phát thanh. Điều này sẽ hoạt động cho tất cả các nút radio trên trang html.

Vĩ cầm

Tôi biết tôi đã chọn máy nướng bằng menuka lệch nhưng nhìn vào các bình luận bên dưới nó, tôi đồng tình và cố gắng đưa ra giải pháp tốt hơn. Tôi đã nghĩ ra điều này và theo tôi, đó là một giải pháp thanh lịch hơn nhiều:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Cảm ơn tất cả những người đã đưa ra câu trả lời, câu trả lời của bạn đã không được chú ý. Nếu bạn vẫn có bất kỳ ý tưởng nào khác, vui lòng thêm câu trả lời của riêng bạn cho câu hỏi này.

thử thêm vertical-align:topvào css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

Kiểm tra: http://jsfiddle.net/muthkum/heAWP/

Cũng có thể thêm một chút linh hoạt cho các câu trả lời.

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

Bạn có thể làm như sau:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

BẢN GIỚI THIỆU

Một cái gì đó như thế này sẽ hoạt động

CSS:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

label, input {
    vertical-align: middle;
}

Tôi chỉ căn chỉnh điểm giữa dọc của các hộp với đường cơ sở của hộp mẹ cộng với một nửa chiều cao x (en.wikipedia.org/wiki/X-height) của hộp chính.

Rất nhiều câu trả lời nói rằng hãy sử dụng vertical-align: middle;, điều này giúp căn chỉnh gần nhau nhưng đối với tôi, nó vẫn bị lệch một vài pixel. Phương pháp mà tôi đã sử dụng để có được sự căn chỉnh đúng 1 đến 1 giữa các nhãn và đầu vào vô tuyến là vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

Tôi thích đặt các đầu vào bên trong các nhãn (phần thưởng thêm: bây giờ bạn không cần forthuộc tính trên nhãn) và đặt vertical-align: middleđầu vào.

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

(Vấn -2px margin-topđề là hương vị.)

Một lựa chọn khác mà tôi thực sự thích là sử dụng bảng. (Hãy giữ những cú nĩa chào hàng của bạn! Nó thực sự tuyệt vời!) Điều đó có nghĩa là bạn cần thêm forthuộc tính cho tất cả các nhãn và ids vào đầu vào của mình. Tôi đã đề xuất tùy chọn này cho các nhãn có nội dung văn bản dài, trên nhiều dòng.

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

Mặc dù tôi đồng ý rằng các bảng không nên được sử dụng cho các bố cục thiết kế trái với niềm tin phổ biến là chúng vượt qua xác nhận. tức là thẻ bảng không bị phản đối. Cách tốt nhất để căn chỉnh các nút radio là sử dụng CSS ở giữa căn chỉnh theo chiều dọc với lề được điều chỉnh trên các phần tử đầu vào.

Tôi nghĩ rằng việc thêm display:inline-blockvào các nhãn và cho chúng padding-topsẽ khắc phục được điều này. Ngoài ra, chỉ cần thiết lập line-heighttrên các nhãn cũng sẽ.

có một số cách, tôi muốn sử dụng một bảng trong html. bạn có thể thêm hai bảng ba hàng màu và đặt các nút radio và bảng lable.

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>