HTML5에서 캔버스를 중앙에 배치하는 방법
나는 한동안 해결책을 찾고 있었지만 아무것도 찾지 못했습니다. 내 검색어 일 수도 있습니다. 글쎄, 브라우저 창의 크기에 따라 캔버스 중앙을 만들려고합니다. 캔버스는 800x600입니다. 그리고 윈도우가 800x600 미만이면 크기도 조정되어야합니다 (현재로서는 그다지 중요하지 않습니다).
캔버스에 다음 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을 사용해야합니다.
캔버스에 ff CSS 속성을 제공 할 수 있습니다.
#myCanvas
{
display: block;
margin: 0 auto;
}
HTML에서 div를 중앙에 배치하십시오.
#test {
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
}
<div id="test">
<canvas width="100" height="100"></canvas>
</div>
Just change the height and width to whatever and you've got a centered div
The above answers only work if your canvas is the same width as the container.
This works regardless:
#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>Use this code:
<!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>
To center the canvas element horizontally, you must specify it as a block level and leave its left and right margin properties to the browser:
canvas{
margin-right: auto;
margin-left: auto;
display: block;
}
If you wanted to center it vertically, the canvas element needs to be absolutely positioned:
canvas{
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
If you wanted to center it horizontally and vertically, do:
canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For more info visit: https://www.w3.org/Style/Examples/007/center.en.html
I have had the same problem, as I have pictures with many different widths which I load only with height info. Setting a width allows the browser to stretch and squeeze the picture. I solve the problem by having the text line just before the image_tag line centred (also getting rid of float: left;). I would have liked the text to be left aligned, but this is a minor inconvienence, that I can tolerate.
Add text-align: center; to the parent tag of <canvas>. That's it.
Example:
<div style="text-align: center">
<canvas width="300" height="300">
<!--your canvas code -->
</canvas>
</div>
참고URL : https://stackoverflow.com/questions/5127937/how-to-center-canvas-in-html5
'programing tip' 카테고리의 다른 글
| SQL NVARCHAR 및 VARCHAR 제한 (0) | 2020.08.23 |
|---|---|
| Java 문자열에 따옴표를 입력하는 방법은 무엇입니까? (0) | 2020.08.23 |
| Nullable을 증가시키지 않는 이유 (0) | 2020.08.23 |
| ActionLink의 ID를 컨트롤러에 전달하는 ASP.NET MVC (0) | 2020.08.23 |
| 모듈 __file__ 속성은 절대적입니까 아니면 상대적입니까? (0) | 2020.08.22 |