顶对齐 div

Question

我有一个包含单选按钮和 canvas 元素的 div 元素。我如何才能使单选按钮与 canvas 元素的顶部对齐？

<!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>

Answer 1

div/*add a class here preferabily*/ input{
  vertical-align: top;
}

jsBin

Answer 2

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

radio { vertical-align: top; }

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

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

Answer 3

考虑将 class 添加到您的输入标签示例：

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

并使用以下 CSS

应用垂直对齐位置

.ql {
     vertical-align: top;
 }

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

您可以在 this interesting article 上了解有关垂直对齐属性的更多信息。

顶对齐 div

Top align a div

html

css

alignment