Căn chỉnh văn bản theo chiều dọc bên cạnh nút radio

Question

Đây là câu hỏi CSS cơ bản, tôi có nút radio có nhãn văn bản nhỏ sau đó. Tôi muốn văn bản xuất hiện ở giữa theo chiều dọc nhưng văn bản luôn được căn chỉnh với nút của nút radio trong trường hợp của tôi.

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

Đây là một Jsfiddle:

http://jsfiddle.net/UnA6j/

Bất kỳ lời đề nghị?

Xin cảm ơn,

Alan.

Answer 1

Sử dụng nó bên trong một label. Sử dụng vertical-align để đặt nó vào giá trị khác nhau - bottom, baseline, middle, vv

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

Answer 2

Dùng để này

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

Demo

Answer 3

Bạn có thể thử một cái gì đó tương tự;

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

và cung cấp cho khoảng cách lề như trên;

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

đây là fiddle http://jsfiddle.net/UnA6j/11/

Answer 4

Tôi nghĩ rằng đây là những gì bạn có thể được yêu cầu cho

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> 

Answer 5

Bạn cần phải sắp xếp các văn bản bên trái của nút radio sử dụng float: left

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

Bạn có thể sử dụng nhãn quá cho sản lượng phản ứng nhanh hơn.

Answer 6

HTML:

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

CSS:

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

Answer 7

Bạn cũng có thể thử một cái gì đó như thế này:

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>

Answer 8

đơn giản và ngắn giải pháp thêm dưới đây phong cách:

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

Answer 9

Điều này sẽ cho chết trên sự liên kết

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

Answer 10

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

chỉ cần điều chỉnh trên và dưới khi cần thiết cho sự liên kết hoàn hảo của nút radio hoặc hộp kiểm

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