CODEWITHSUNDEEP
phphtmlcssradio-button
ana
ana

Reputation: 417

Vertically align the radio buttons and text

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;

enter image description here

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

enter image description here

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

enter image description here

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>

Upvotes: 2

Views: 1330

Answers (1)

d-h-e
d-h-e

Reputation: 2548

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;\">";

Upvotes: 3

Related Questions