頂部對齊一個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>

來源

2015-10-04 Daniel R. Collins

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

jsBin

來源

2015-10-04 21:12:08

如果要將它們放置在頂部，使用：

radio { vertical-align: top; }

如果你希望他們爲中心，加上

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

來源

2015-10-04 21:17:53 Enzo

考慮增加一類到您輸入的標籤例如：

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

，並使用以下CSS

.ql { 
    vertical-align: top; 
}

工作應用垂直對齊位置例如： https://jsfiddle.net/5u2w4gs6/

您可以在this interesting article上了解更多關於垂直對齊屬性的信息。

來源

2015-10-05 06:53:07 GibboK

頂部對齊一個div

回答

相關問題