Як центрувати полотно в html5

105

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

— йорген
джерело

Як мені це зробити, щоб зробити полотно на повній сторінці, не надаючи розмірів і не маючи смуг прокрутки під час зміни розміру?

— jorgen

2

Не робіть цього в HTML .. зробити це з JavaScript, використовуйте такі речі , як AppendChild або що - то і заданої ширини і висоти до window.innerWidth і window.innerHeight

— в наврочити

173

Надайте полотну такі властивості стилю 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;
}

Однак центрування полотна вертикально вимагає іншого підходу. Потрібно використовувати абсолютне позиціонування та вказати як ширину, так і висоту. Потім встановіть для лівої, правої, верхньої та нижньої властивостей значення 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.

— Марко Лульо
джерело

8

дисплей: блок; та маржа: 0 авто 0 авто; достатньо також. Дякую!

— Кріс

Для вертикального центрування полотна не потрібно вводити ширину та висоту, якщо ви вказали його в HTML. Що стосується хрому, то все одно.

— Зак

1

Ширина і висота можуть бути вказані в css або html. Але css є рекомендованим способом, оскільки вся логіка презентації повинна йти туди.

— Marco Luglio

1

Це центрування полотна, але якщо на полотні є зображення, воно розтягується. Чи можете ви зосереджувати полотно, не розтягуючи зображення

— арійський

Налаштування висоти та ширини в стилі вбудованого елемента на полотні переплутало розміри моїх намальованих зображень тощо. Просто застереження, яке, сподіваємось, врятує когось розчарування.

— MrBoJangles

52

Ви можете надати своєму полотну властивості CSS:

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

— jinmichaelr
джерело

Чи можете ви надати jsfiddle? Цей підхід, здається, не працює

— jose.angel.jimenez

3

Це працює для горизонтального центрування, але не для вертикального центрування.

— Matty J

20

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

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


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

Просто змініть висоту і ширину на будь-яку, і у вас є відцентрований діл

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

— JoeCianflone
джерело

Пощастило мені, мені це було потрібно незабаром після того, як ви опублікували це. :)

— mcandre

5

Це не працює, якщо полотно менше контейнера.

— SystemicPlural

8

Щоб центрувати елемент полотна горизонтально, потрібно вказати його як рівень блоку та залишити його лівий і правий поля властивості для браузера:

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

Якщо ви хотіли зафіксувати його вертикально, елемент полотна повинен бути абсолютно розміщений:

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

— Конкрет
джерело

5

Наведені вище відповіді працюють лише в тому випадку, якщо ваше полотно має таку ж ширину, як контейнер.

Це працює незалежно від:

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

Розгорніть фрагмент

— SystemicPlural
джерело

3

Використовуйте цей код:

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

— Keyur Patel
джерело

2

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

— МДМ
джерело

0

Додати text-align: center;в батьківський тег з<canvas> . Це воно.

Приклад:

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

— Радж Ядав
джерело

це просто, тоді використовуючи css

— Clifton Avil D'Souza