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>
1 answers
solution1
4 2019-03-30 19:47:24
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;\">";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.