如何以水平格式對齊div？

Question

我正在繪制2個圓，並且在這2個圓之間有一個img。 我想將所有這些對齊在一條水平線上。 所有這些都在span4寬度的div內。

這是我的代碼。

<div id = "divid" span4>

JS代碼

var circle_style = "<div style = 'float:left'><canvas id='myCanvas' ></canvas></div><div style = 'float:left'><img src = 'img'></div><div style = 'float:left'><canvas id='myCanvas1'></canvas></div"


$("#divid").append(circle_style);

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 75;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();


var canvas2 = document.getElementById('myCanvas1');
var context2 = canvas2.getContext('2d');
var centerX2= canvas2.width / 2;
var centerY2 = canvas2.height / 2;
var radius2 = 75;

context2.beginPath();
context2.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context2.fillStyle = 'green';
context2.fill();

另外，如何在圈子中插入文字？

Answer 1

您正在提供內聯樣式。 這是非常不好的做法。

您尚未將src給image。

嘗試這個：

JS：

var circle_style = "<div class='left vmiddle'><canvas id='myCanvas' ></canvas></div><div class='left vmiddle'><img src = 'img'></div><div class='left vmiddle'><canvas id='myCanvas1'></canvas></div>";

CSS：

img{height:50px;width:50px;background:#ccc;}
.vmiddle{vertical-align:middle;}
.left{display:inline-block;}
#divid{min-width:650px;}

演示在這里。

在這里輸出。