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

Question

当我在单选按钮旁边放置文本时，我希望它在垂直方向上对齐，因此文本不在我的单选按钮下面。 例如，请参见此打印屏幕

这是我使用的代码：

<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;结合使用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

我将单选按钮文本放在标签标签中，并通过调整其宽度百分比，可以使换行后的文本正确地垂直对齐。 这是一张照片。

的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/