HTML5에서 캔버스를 중앙에 배치하는 방법

105

나는 한동안 해결책을 찾고 있었지만 아무것도 찾지 못했습니다. 내 검색어 일 수도 있습니다. 글쎄, 브라우저 창의 크기에 따라 캔버스 중앙을 만들려고합니다. 캔버스는 800x600입니다. 그리고 윈도우가 800x600 미만이면 크기도 조정되어야합니다 (현재로서는 그다지 중요하지 않습니다).

— Jorgen
소스

크기를 조정할 때 크기를 지정하지 않고 스크롤 막대없이 전체 페이지 캔버스를 만들도록 어떻게 지시합니까?

— jorgen

2

HTML로하지 마십시오. .. 자바 스크립트로 수행하고 appendChild 같은 것을 사용하고 너비와 높이를 window.innerWidth 및 window.innerHeight로 설정합니다

— the JinX

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;
}

그러나 캔버스를 수직으로 중앙에 배치 하려면 다른 접근 방식이 필요합니다. 절대 위치 지정을 사용하고 너비와 높이를 모두 지정해야합니다. 그런 다음 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설정된 첫 번째 상위 요소 또는 발견되지 않은 경우 본문을 기반으로 중앙에 위치합니다 .relativeabsolute

또 다른 접근 방식은 display: flexIE11에서 사용할 수있는를 사용 하는 것입니다.

또한 xhtml 또는 html 5와 같은 최신 doctype을 사용해야합니다.

— 마르코 루글 리오
소스

8

디스플레이 : 블록; 그리고 margin : 0 auto 0 auto; 충분합니다. 고마워!

— 크리스

캔버스를 세로로 가운데 맞추기 위해 HTML에서 지정하는 한 너비와 높이를 넣을 필요가 없습니다. 어쨌든 크롬에서.

— Zac

1

너비와 높이는 CSS 또는 HTML로 지정할 수 있습니다. 그러나 CSS는 모든 프리젠 테이션 로직이 거기에 가야하기 때문에 권장되는 방법입니다.

— Marco Luglio

1

캔버스를 중심으로하고 있지만 캔버스에 그린 이미지가 있으면 늘어납니다. 당신은 이미지 스트레칭없이 캔버스를 중심으로 수

— 아리아

캔버스 요소의 인라인 스타일에서 높이와 너비를 설정하면 그린 이미지 등의 크기가 엉망입니다. 누군가의 좌절감을 덜어 줄 수있는 경고입니다.

— MrBoJangles

52

캔버스에 ff CSS 속성을 제공 할 수 있습니다.

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

— 진 마이 클러
소스

jsfiddle을 제공 할 수 있습니까? 이 방법은 작업에 표시되지 않습니다

— jose.angel.jimenez

3

이것은 수평 센터링에는 작동하지만 수직 센터링에는 적용되지 않습니다.

— Matty J

20

HTML에서 div를 중앙에 배치하십시오.

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

— JoeCianflone
소스

운 좋게도 당신이 그것을 게시 한 직후에 필요했습니다. :)

— mcandre 2011 년

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을 참조 하십시오.

— Konkret
소스

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>

— 케 유르 파텔
소스

2

높이 정보로만로드하는 다양한 너비의 사진이 있기 때문에 동일한 문제가 발생했습니다. 너비를 설정하면 브라우저가 그림을 늘리거나 줄일 수 있습니다. image_tag 줄 바로 앞에 텍스트 줄을 가운데에 두어 문제를 해결합니다 (float : left; 제거도 제거). 나는 텍스트가 왼쪽으로 정렬되는 것이 좋았을 것이지만 이것은 내가 용인 할 수있는 사소한 불편 함이다.

— MDM
소스

0

text-align: center;의 상위 태그 에 추가 합니다 <canvas>. 그게 다야.

예:

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

— 라지 야다 브
소스

이 간단한 한 후 사용하는 CSS입니다

— 클리프 턴 아빌 D' 수자