Центрирование нескольких объектов, смежных друг с другом с помощью CSS

Question

У меня есть несколько холстов, которые я хочу отображать рядом друг с другом. Я не самый знакомый с CSS, но я попытался разместить их все в div с центром, причем каждый под определенным float (canvas_left установлен для float left, canvas_center установлен в центр холста или canvas_right, чтобы плавать вправо) , По какой-то причине я не могу заставить их всех быть смежными и центрированными по горизонтали на экране.

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> 

Если вы знаете, как это исправить, пожалуйста, дайте мне знать.

Answer 1

Я предлагаю использовать flexboxes, вы можете сделать почти ничего с этим.

Кроме того, класс контейнера является такой же, как ребенок один, вы должны изменить это, например, так:

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

Вам необходимо поплавать все canvas теги. Изменение CSS:

.left { 
    display: block; 
    float: left; 
} 
.center { 
    display: block; 
    margin: auto; 
    float: left; 
} 
.right { 
    display: block; 
    float: left; 
} 

Но следует помнить, что при изменении ширины дисплея, то холст теги снова будут выровнены друг под другом.

Воспроизвести here.

Answer 3

Я думаю, что это то, чего вы хотите достичь.

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> 

Answer 4

Там нет поплавка центр. Макет не работает, потому что основной холст - это неплавающий блок.

Использование поплавков - это, вероятно, плохая идея. Лучше использовать инлайн-блоки:

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

Или Flexbox, современный способ сделать это:

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