如何以水平格式对齐div？

Question

I'm drawing 2 cirlces and having an img in between those 2 circles. I want to align all these in one horizontal line. All of these are inside a div of span4 width.

Here is my code.

<div id = "divid" span4>

JS code

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();

Also, how do I insert text inside the circles?

Answer 1

You are giving inline style. That is a very bad practice.

You have not given src to image.

Try this:

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;}

Demo here.

Output here.