如何使單選按鈕旁邊的文本垂直對齊（在較小的屏幕上）？

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/