Как центрировать холст в html5 - PullRequest
Новая
       14

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

96 голосов
/ 26 февраля 2011

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

Ответы [ 8 ]

156 голосов
/ 16 октября 2011

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

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

Редактировать

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

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

Однако, если вы хотите печатать меньше, вы можете использовать любые сокращенные свойства 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;
}

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

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

Также убедитесь, чтоВы используете недавний тип документа, такой как xhtml или html 5.

44 голосов
/ 14 июня 2012

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

#myCanvas
{
    display: block;
    margin: 0 auto;
}
20 голосов
/ 16 марта 2011

Просто центрируйте 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/

5 голосов
/ 23 июня 2015

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

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

#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>
3 голосов
/ 24 ноября 2018

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

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Если вы хотите центрировать его вертикально, элемент canvas должен быть абсолютно позиционирован: 

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Если вы хотите отцентрировать его по горизонтали и вертикали, выполните: 

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Для получения дополнительной информации посетите: https://www.w3.org/Style/Examples/007/center.en.html

3 голосов
/ 26 июня 2018

Используйте этот код: 

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>
2 голосов
/ 23 апреля 2012

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

0 голосов
/ 21 октября 2018

Добавьте text-align: center; к родительскому тегу из <canvas>.Вот и все.

Пример: 

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>
...