Как центрировать холст в html5

Я искал решение какое-то время, но ничего не нашел. Возможно, это только мои поисковые термины. Ну, я пытаюсь сделать центр холста в соответствии с размером окна браузера. Холст 800x600. И если окно становится ниже 800x600, оно также должно изменяться (но это не очень важно на данный момент)

Ответ 1

Дайте холсту следующие свойства стиля CSS:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Edit

Поскольку этот ответ довольно популярен, позвольте мне добавить немного более подробную информацию.

Вышеуказанные свойства будут горизонтально центрировать холст, div или любой другой node у вас относительно родителя. Нет необходимости менять верхнее или нижнее поля и прокладки. Вы указываете ширину и позволяете браузеру заполнять оставшееся пространство с помощью автоматических полей.

Однако, если вы хотите набрать меньше, вы можете использовать любые сокращенные свойства css, которые вы хотите, например

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

При центрировании холста вертикально требуется другой подход. Вам нужно использовать абсолютное позиционирование и указать ширину и высоту. Затем установите для параметра left, right, top и bottom значение 0 и пусть браузер заполнит оставшееся пространство автоматическими полями.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Холст будет центрировать себя на основе первого родительского элемента с position, установленного на relative или absolute, или тела, если его не найдено.

Другим подходом было бы использовать display: flex, который доступен в IE11

Кроме того, убедитесь, что вы используете недавний doctype, такой как xhtml или html 5.

Ответ 2

Вы можете дать вашему холсту свойства CSS ff:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

Ответ 3

Просто центрируйте div в HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Просто измените высоту и ширину на все, и у вас есть центрированный div

http://jsfiddle.net/BVghc/2/

Ответ 4

Вышеуказанные ответы работают только в том случае, если ваш холст имеет ту же ширину, что и контейнер.

Это работает независимо:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}

<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

Ответ 5

У меня была такая же проблема, как у меня есть картинки со многими разными ширинами, которые я загружаю только с информацией о высоте. Установка ширины позволяет браузеру растягивать и сжимать изображение. Я решаю проблему, располагая текстовую строку непосредственно перед выравниванием линии image_tag (также избавляясь от float: left;). Мне бы хотелось, чтобы текст оставался выровненным, но это небольшое неудобство, которое я могу терпеть.