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

【问题标题】：How to vertical align text next to radio button (on smaller screen)?如何垂直对齐单选按钮旁边的文本（在较小的屏幕上）？
【发布时间】：2016-11-04 05:49:17
【问题描述】：

当我将文本放在我的单选按钮旁边时，我希望它垂直对齐，因此文本不在我的单选按钮下方。 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 吗？

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

首先，将文本放入<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;
}

希望对你有帮助

【讨论】：

如果没有 margin: 0; 在无线电场上，这将无法工作。
您好安德鲁，感谢您的帮助！但现在文本位于单选按钮下方。我不明白为什么。我想要单选按钮旁边的文本。你有想法吗？干杯！
@RobinBuzink 试试上面的评论，确保浏览器没有为标签和输入添加边距。

【解决方案2】：

我将单选按钮文本放在标签标签中，通过调整其宽度百分比，我能够使包装文本正确垂直对齐。 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】：

您可以在两个元素（复选框及其旁边的标签）上结合使用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/

编辑：

前一种解决方案不适用于 cmets 中提到的长标签文本。另一种可能性是，将单选按钮绝对放置在 <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/

【讨论】：

您好，感谢您的帮助！我试过了，但我有一个更大的句子。所以句子很长，在某些设备上它是两条规则。所以我希望第二条规则不在单选按钮下，而是在单选按钮旁边的文本下。使用您的 CSS，它可以很好地处理短文本。但是对于长文本，它会将文本放在单选按钮下方。你有想法吗？干杯！
@RobinBuzink 我添加了另一个解决方案，它适用于标签文本的每个长度。如果您希望单选按钮位于顶部而不是中间，则可以删除 transform 属性并添加 top: 0; 而不是 top: 50%;。