Question

当我在单选按钮旁边放置文本时，我希望它垂直对齐，因此文本不在我的单选按钮下方。 See this printscreen for example

这是我使用的代码：

<td>
    <input type="radio" id="act41" name="action4" value="Geen vertraging, op tijd" onfocus="checkfocus()">
    Geen vertraging en tijd aangekomen
</td>

这是单选按钮的CSS：

input[type="radio"] {
    width: 25px;    
    float: left;
    vertical-align: baseline;
}

当我希望文本垂直对齐时，你有什么提示我应该应用CSS吗？

Answer 1

您可以将vertical-align: middle;与display: inline-block;结合使用两个元素（复选框和旁边的标签）。

HTML：

<div>
    <input type="radio">
    <label>Test<br>Test</label>
</div>

CSS：

input[type=radio],
label {
  vertical-align: middle;
  display: inline-block;
}

这是一个jsFiddle，显示结果：https://jsfiddle.net/5a9fcu1n/1/

修改

前面的解决方案不适用于评论中提到的长标签文本。另一种可能性是，将单选按钮放在<label>旁边，并为标签添加填充。

HTML：

<div class="wrapper"> <input type="radio" id="radioBox"> <label for="radioBox">long text [....]</label> </div>

CSS：

.wrapper { position: relative; } .wrapper input[type=radio] { position: absolute; margin: 0; left: 0; width: 30px; top: 50%; transform: translateY(-50%); /* you could also drop transform and use top: 0; */ } .wrapper label { display: block; padding-left: 30px; }

以下是相应的jsFiddle：https://jsfiddle.net/5a9fcu1n/3/

Answer 2

首先，将文本放在<label>标记中，以便我们可以定位它。因为这是一种很好的做法

HTML：

<td>
    <input type="radio" id="act41" name="action4" value="Geen vertraging, op tijd" onfocus="checkfocus()">
    <label for="act41">
         Geen vertraging en tijd aangekomen
    </label>
 </td>

然后在CSS中我们可以使用calc函数来确保它始终位于输入旁边。 CSS：

input[type="radio"] 
{
     width: 25px;    
     float: left;
     vertical-align: baseline;
     box-sizing: border-box;
     display: inline-block;
}
input[type="radio"] ~ label
{
     width: calc(100% - 25px);    
     float: left;
     vertical-align: baseline;
     padding-left: 16px;
     box-sizing: border-box;
     display: inline-block;
}

希望这有帮助

Answer 3

我将单选按钮文本放在标签标签中，通过调整其宽度百分比，我可以使包装文本垂直对齐。 Here's a picture.

HTML

<td>
    <input type="radio" id="act41" name="action4" value="Geen vertraging, op tijd" onfocus="checkfocus()">
    <label for="act41">Geen vertraging en tijd aangekomen</label>
</td>

CSS

label
{
   vertical-align: middle;
   display: inline-block;
   width: 70%;
}

jsFiddle：https://jsfiddle.net/5a9fcu1n/2/

如何垂直对齐单选按钮旁边的文本（在较小的屏幕上）？

3 个答案: