中心單選按鈕垂直旁邊標註

我試圖與它的標籤垂直居中我所有的單選按鈕，但vertical-align沒有幫助：中心單選按鈕垂直旁邊標註

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

<p style="display:inline-block;margin:0 0;"> Option: </p> 
 
<label> 
 
<input type="radio" name="group1"> Label1 
 
</label> 
 
<label> 
 
<input type="radio" name="group1"> Label2 
 
</label> 
 
<label> 
 
<input type="radio" name="group1"> Label3 
 
</label>

來源

2017-08-12 user924

正確的是：垂直 - align：middle;

來源

2017-08-12 16:29:00

我試了一下，單選按鈕將在底部 – user924

https://jsfiddle.net/n6pywz4g/2/ – user924

取決於你的行高也與在線交易時塊元素。 – Stuart

您可以使用這些CSS設置：

input[type="radio"] { 
 
    display: block; 
 
    margin: 0 auto 5px auto; 
 
    
 
} 
 
label { 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 80px; 
 
}

<p style="display:inline-block;margin:0 0;"> Option: </p> 
 
<label> 
 
<input type="radio" name="group1"> Label1 
 
</label> 
 
<label> 
 
<input type="radio" name="group1"> Label2 
 
</label> 
 
<label> 
 
<input type="radio" name="group1"> Label3 
 
</label>

並應用到您的jsfiddle：https://jsfiddle.net/p5ts1rco/1/

來源

2017-08-12 16:45:39 Johannes

文本上方的單選按鈕？）無論如何，我解決了它：https：//stackoverflow.com/a/45652690/7767664 – user924

「垂直中心與它的標籤」 - 我理解你的方式......什麼是在你的解決方案，以及這個問題有什麼不同？ – Johannes

[解決]

我修改這個例子的複選框https://stackoverflow.com/a/494922/7767664（改爲收音機b uttons）：

.checkboxes label { 
 
    display: block; 
 
    float: left; 
 
    padding-right: 3px; 
 
    white-space: nowrap; 
 
} 
 
.checkboxes input { 
 
    vertical-align: middle; 
 
} 
 
.checkboxes label span { 
 
    vertical-align: middle; 
 
    font-size:29px; 
 
}

<div class="checkboxes"> 
 
    <label> <span>Option: </span></label> 
 
    <label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label> 
 
    <label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label> 
 
    <label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label> 
 
</div>

來源

2017-08-12 16:47:37 user924

中心單選按鈕垂直旁邊標註

回答

相關問題