顶部对齐一个div

问题描述：

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

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

答

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

jsBin

答

如果要将它们放置在顶部，使用：

radio { vertical-align: top; }

如果你希望他们为中心，加上

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

答

考虑增加一类到您输入的标签例如：

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

，并使用以下CSS

.ql { 
    vertical-align: top; 
}

工作应用垂直对齐位置例如： https://jsfiddle.net/5u2w4gs6/

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

相关推荐