Centering multiple objects adjacent to each other with CSS - html

Question

I have multiple canvases that I want to display adjacent to each other. I'm not the most familiar with CSS but I've tried placing them all in a div that is centered, with each under a specific float (canvas_left set to float left, canvas_center set to canvas center, or canvas_right set to float right). For some reason I can't get them all be to adjacent and centered horizontally on the screen.
CSS:
.left {
display: block;
float: left;
}
.center {
display: block;
margin: auto;
}
.right {
display: block;
float: right;
}
HTML:
<div class="center">
<canvas id="canvas_left" class="left" width="150px" height="400px"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right" width="150px" height="400px"></canvas>
</div>
If you know how to fix this, please let me know.

Answer 1

There is no float center. You layout doesn't work because the main canvas is a non-floated block.
Using floats is probably a bad idea anyways. Better use inline-blocks:
.wrapper {
text-align: center;
}
canvas {
border: 1px solid;
width: 25%;
display: inline-block;
}
<div class="wrapper">
<canvas id="canvas_left"></canvas>
<canvas id="canvas_main"></canvas>
<canvas id="canvas_right"></canvas>
</div>
Or flexbox, the modern way to do it:
.wrapper {
display: flex;
justify-content: center;
}
canvas {
border: 1px solid;
width: 25%;
}
<div class="wrapper">
<canvas id="canvas_left"></canvas>
<canvas id="canvas_main"></canvas>
<canvas id="canvas_right"></canvas>
</div>

Answer 2

I suggest using flexboxes, you can do almost anything with that.
Also the container class is the same as the child one, you should change that, like so:
<div id="canvas">
<canvas id="canvas_left" class="left" width="150px" height="400px"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right" width="150px" height="400px"></canvas>
</div>
#canvas {
display: flex;
justify-content: center;
}
.left { background: green; flex-shrink: 0; }
.center { background: blue; flex-shrink: 0; }
.right { background: purple; flex-shrink: 0; }
JSfiddle: jsfiddle.net/8uv2zowm

Answer 3

You need to float all canvas tags. Change your CSS:
.left {
display: block;
float: left;
}
.center {
display: block;
margin: auto;
float: left;
}
.right {
display: block;
float: left;
}
But be aware that when changing display width, the canvas tags will again be aligned under each other.
Play around here.

Answer 4

I think this is what you want to achieve.
CSS
.container {
float: left;
}
.left {
display: inline-block;
width: 150px;
height: 400px;
background-color: red;
}
.center {
display: inline-block;
width: 150px;
height: 400px;
background-color: blue;
}
.right {
display: inline-block;
width: 150px;
height: 400px;
background-color: green;
}
HTML
<div class="container">
<canvas id="canvas_left" class="left"></canvas>
<canvas id="canvas_main" class="center"></canvas>
<canvas id="canvas_right" class="right"></canvas>
</div>