垂直对齐单选按钮和文本

Question

我试图让我的代码中共存以下样式以将它们应用到单选按钮，但我无法让它们同时工作。

这是两个： display:flex; 和vertical-align: baseline;

这是没有： display:flex; 但是使用vertical-align: baseline;

我尝试过display:flex; align-items: center; 但它也不起作用：

显然，我无法将2种风格保留在单选按钮上。 我试图使用其他类型的风格，但它们不能按我的意愿工作。 我想将单选按钮与其标签和文本垂直对齐在与第一张图像相同的行上。 你能帮我搞定吗？

这是我的代码：

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

这是我所拥有的一个小例子：表格内的单选按钮。

 <!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与flexbox无关。

如果你想使用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