How to vertical align text next to radio button (on smaller screen)?

Question

When I put text next to my radio button, I want it to be vertically aligned, so the text isn't below my radio button. See this printscreen for example

This is the code I've used:

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

This is the CSS for the radio button:

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

Do you have any tips which CSS I should apply when I want the text to be vertically aligned?

Answer 1

You could use vertical-align: middle; in combination with display: inline-block; on both elements (the checkbox and the label next to it).

HTML:

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

CSS:

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

Here is a jsFiddle, showing the result: https://jsfiddle.net/5a9fcu1n/1/

---

EDIT:

The former solution does not work properly for long label texts as mentioned in the comments. Another possibility is, to position the radio button absolutely next to the <label> and give the label a padding.

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;
}

Here is the according jsFiddle: https://jsfiddle.net/5a9fcu1n/3/

Answer 2

First, put the text in a <label> tag so we can target it. And because it's good practice

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>

Then in the CSS we can use the calc function to make sure it's always next to the input. 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;
}

Hope this helps

Answer 3

I put the radio button text in a label tag and by adjusting its width percentage I was able to get the wrapped text to vertically align correctly. 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/