Cách căn giữa canvas trong html5

Question

Tôi đã tìm kiếm một giải pháp trong một thời gian, nhưng chưa tìm thấy bất kỳ thứ gì. Có lẽ đó chỉ là thuật ngữ tìm kiếm của tôi. Vâng, tôi đang cố gắng làm cho trung tâm canvas theo kích thước của cửa sổ trình duyệt. Canvas là 800x600. Và nếu cửa sổ được dưới 800x600, cần thay đổi kích thước cũng như (nhưng đó không phải là rất quan trọng vào lúc này)

Answer 1

Chỉ cần tập trung div trong HTML:

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


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

Chỉ cần thay đổi chiều cao và chiều rộng để bất cứ điều gì và bạn đã có một div trung

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

Answer 2

cho vải các thuộc tính phong cách css sau:

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

---

Sửa

Kể từ khi câu trả lời này là khá phổ biến, cho tôi thêm một chút chi tiết.

Các thuộc tính trên sẽ theo chiều ngang căn giữa canvas, div hoặc bất kỳ nút nào khác mà bạn có liên quan đến bố cục đó. Không cần phải thay đổi lề và đáy trên cùng hoặc dưới cùng. Bạn chỉ định chiều rộng và cho phép trình duyệt lấp đầy khoảng trống còn lại với các lề tự động.

Tuy nhiên, nếu bạn muốn gõ ít hơn, bạn có thể sử dụng bất cứ điều gì viết tắt css thuộc tính bạn muốn, chẳng hạn như

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

Định tâm vải theo chiều dọc đòi hỏi một cách tiếp cận khác nhau tuy nhiên. Bạn cần sử dụng định vị tuyệt đối và chỉ định cả chiều rộng và chiều cao. Sau đó thiết lập các thuộc tính bên trái, phải, trên và dưới thành 0 và để cho trình duyệt lấp đầy khoảng trống còn lại với các lề tự động.

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

Các canvas sẽ tập trung riêng của mình dựa trên các yếu tố phụ huynh đầu tiên mà có position thiết lập để relative hoặc absolute, hoặc cơ thể nếu không được tìm thấy.

cách tiếp cận khác sẽ được sử dụng display: flex, đó là có sẵn trong IE11

Ngoài ra, hãy chắc chắn rằng bạn sử dụng một loại tài liệu gần đây như xhtml hoặc html 5.

Answer 3

Tôi đã có cùng một vấn đề, như tôi có hình ảnh với nhiều độ rộng khác nhau mà tôi chỉ tải với thông tin chiều cao. Đặt chiều rộng cho phép trình duyệt kéo dài và siết chặt hình ảnh. Tôi giải quyết vấn đề bằng cách có dòng văn bản ngay trước dòng image_tag làm trung tâm (cũng loại bỏ float: left;). Tôi đã có thể thích văn bản để được căn trái, nhưng đây là một sự bất tiện nhỏ, mà tôi có thể chịu đựng được.

Answer 4

Bạn có thể cung cấp cho bạn canvas các thuộc tính CSS ff:

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

Answer 5

Những câu trả lời ở trên chỉ có tác dụng nếu vải của bạn là chiều rộng tương tự như thùng sơn.

này hoạt động không phân biệt:

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