垂直对齐单选按钮和文本

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; 这是两个： display:flex; and vertical-align: baseline; 和vertical-align: baseline;

This is without: display:flex; 这是没有： display:flex; but with vertical-align: baseline; 但是使用vertical-align: baseline;

I have tried with display:flex; 我尝试过display:flex; align-items: center; but it doesn't work either: 但它也不起作用：

Apparently, I cannot keep the 2 styles on the radio buttons. 显然，我无法将2种风格保留在单选按钮上。 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>

Answer 1

vertical-align: baseline has nothing to do with flexbox. vertical-align: baseline与flexbox无关。

If you want to do it with flexbox then give the div wrapper following properties: 如果你想使用flexbox，那么给div包装器提供以下属性：

display: flex;
align-items: center;

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

垂直对齐单选按钮和文本

问题描述

1 个解决方案

解决方案1
4 2019-03-30 19:47:24

垂直对齐单选按钮和文本

问题描述

1 个解决方案

解决方案1 4 2019-03-30 19:47:24

解决方案1
4 2019-03-30 19:47:24