Question

我有一个包含单选按钮和画布元素的div元素。我如何得到这个，以便单选按钮与画布元素的顶部对齐？

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      margin: auto;
      max-width: 450px;
      font-family: "Arial";
      font-weight: 200;
      font-size: 22px;
    }
  }
  </style>
</head>

<body>
  <div>
    1) <span id="q1Text">**********</span>
  </div>
  <div>
    <input type="radio" name="q1" id="q1Opt1">
    <canvas id="q1Opt1Canvas" width="120" height="120" style="border:1px solid #d3d3d3;"></canvas>
    <input type="radio" name="q1" id="q1Opt2">
    <canvas id="q1Opt2Canvas" width="120" height="120" style="border:1px solid #d3d3d3;"></canvas>
    <input type="radio" name="q1" id="q1Opt3">
    <canvas id="q1Opt3Canvas" width="120" height="120" style="border:1px solid #d3d3d3;"></canvas>
  </div>
  <br>
</body>

</html>

＆＃13;

Answer 1

考虑在输入标记示例中添加一个类：

 <input class="ql" type="radio" name="q1" id="q1Opt1">

使用以下CSS

应用垂直对齐位置

.ql {
     vertical-align: top;
 }

工作示例： https://jsfiddle.net/5u2w4gs6/

您可以在this interesting article上了解有关vertical-align属性的更多信息。

Answer 2

如果您希望它们与顶部对齐，请使用：

radio { vertical-align: top; }

如果您希望它们居中，请添加

margin-top: 60px; // 60= canevas height / 2

顶部对齐div

2 个答案: