Vertically align the radio buttons and text

Question

I'm trying to make the following styles coexist in my code to apply them to the radio buttons, but I can’t get them both to work at the same time.

This is with both: display:flex; and vertical-align: baseline;

This is without: display:flex; but with vertical-align: baseline;

I have tried with display:flex; align-items: center; but it doesn't work either:

Apparently, I cannot keep the 2 styles on the radio buttons. I have tried to use other kind of styles but they don’t work as I want. I would like to vertically align the radio buttons with their labels and text on the same line as in the first image. can you help me get it?

This is my code:

<?php
if ($row["type"] == 0) {

    $ansarray = explode("\n", $row["image_path"]);
    $randomans = [];
    for($i=0; $i<count($ansarray); $i++) {
        $a = array($i+1, $ansarray[$i]);
        array_push($randomans, $a);
    }
    shuffle($randomans);
    for($i=0; $i<count($randomans); $i++) {
        echo "<div style=\"text-align:left; display:flex; vertical-align: baseline;\">";
        echo "<input type=\"radio\" name=\"choice".$row["exercise_id"]."\" value= \"".$randomans[$i][0]."\"  />".$randomans[$i][1]."<br>";
        echo "</div>";
    }

    echo "<input type=\"text\" name=\"choicetext".$row["exercise_id"]."\" value='multi' style=\"display:none;\">";

} else {
    ?>
    <input type="radio" name="choice<?php echo $row["exercise_id"] ?>" value= "0" checked="checked" style="display:none;" />

    <?php
}
?>

This is a small example of what I have: Radio buttons inside a table.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 40%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;  
}

</style>
</head>

<body>
<table>
  <tr>
    <td><form action="">
    
  <input type="radio" name="gender" value="English"> English is a West Germanic language that was first spoken in early medieval England.<br>
  <input type="radio" name="gender" value="third"> English is the third most-spoken native language in the world, after Standard Chinese and Spanish.<br>
  <input type="radio" name="gender" value="other"> Other
</form></td>  
  </tr>
</table>
</body>
</html>

score 3 · Answer 1 · answered Mar 30 '19 at 19:47

3

vertical-align: baseline has nothing to do with flexbox.

If you want to do it with flexbox then give the div wrapper following properties:

display: flex;
align-items: center;

echo "<div style=\"display:flex; align-items: center;\">";

answered Mar 30 '19 at 19:47

d-h-e

2,478
1
10
18

I have tested your code but it doesn't work correctly. I have edited the question with your styles – ana Mar 30 '19 at 19:52
it looks like your width from the wrapper div is not wide enough for your text. Thats the reason why the text breaks. You can give the div additional `white-space: nowrap; overflow:hidden` to prevent breaking the text. But this cuts the text at the end. – d-h-e Mar 30 '19 at 19:57
I tried to put the new style in the div but what happens is that I have the radio buttons inside a table and when I put 'white-space: nowrap; overflow: hidden', the table is deformed. – ana Mar 30 '19 at 20:00
can you make a [stackoverflow snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) with the generated html. Without knowing your generated html and css it is difficult to help. – d-h-e Mar 30 '19 at 20:06
I don't know how to do a stackoverflow snippet in my case because I get all the data from a database and my code is quite long ... – ana Mar 30 '19 at 20:33
A small static example which behave like your generated table checkbox construct would be enough to reproduce your problem. In your example i can not see something like a table. But your problem seems to do something with your table. Sorry for my bad english :) – d-h-e Mar 30 '19 at 20:43

Vertically align the radio buttons and text

1 Answers1