วิธีจัดกึ่งกลางผ้าใบใน html5

Question 1

ฉันค้นหาวิธีแก้ปัญหามาระยะหนึ่งแล้ว แต่ไม่พบอะไรเลย อาจจะเป็นแค่คำค้นหาของฉัน ฉันกำลังพยายามสร้างศูนย์ผ้าใบตามขนาดของหน้าต่างเบราว์เซอร์ ผ้าใบมีขนาด 800x600 และหากหน้าต่างมีขนาดต่ำกว่า 800x600 ก็ควรปรับขนาดเช่นกัน (แต่ตอนนี้ไม่สำคัญมาก)

Question 2

ให้ canvas คุณสมบัติสไตล์ 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

นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณใช้ประเภทหลักล่าสุดเช่น xhtml หรือ html 5

Question 3

คุณสามารถให้คุณสมบัติ ff CSS บนผืนผ้าใบของคุณ:

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

Question 4

จัดกึ่งกลาง 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/

Question 5

ในการจัดองค์ประกอบผ้าใบให้อยู่กึ่งกลางในแนวนอนคุณต้องระบุเป็นระดับบล็อกและปล่อยคุณสมบัติระยะขอบซ้ายและขวาไว้ที่เบราว์เซอร์:

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

Question 6

คำตอบข้างต้นใช้ได้ผลก็ต่อเมื่อผืนผ้าใบของคุณมีความกว้างเท่ากับคอนเทนเนอร์เท่านั้น

สิ่งนี้ใช้งานได้โดยไม่คำนึงถึง:

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

ขยายข้อมูลโค้ด

Question 7

ใช้รหัสนี้:

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

Question 8

ฉันมีปัญหาเดียวกันเนื่องจากฉันมีรูปภาพที่มีความกว้างต่างกันซึ่งฉันโหลดเฉพาะข้อมูลความสูงเท่านั้น การตั้งค่าความกว้างทำให้เบราว์เซอร์สามารถยืดและบีบรูปภาพได้ ฉันแก้ปัญหาโดยให้บรรทัดข้อความอยู่ก่อนบรรทัด image_tag อยู่ตรงกลาง (กำจัด float: left;) ฉันอยากให้ข้อความถูกจัดชิดซ้าย แต่นี่เป็นความไม่สะดวกเล็กน้อยที่ฉันสามารถทนได้

Question 9

เพิ่มtext-align: center;ในแท็กหลักของ<canvas>. แค่นั้นแหละ.

ตัวอย่าง:

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

Question 10

ใช้กริด?

const canvas = document.querySelector('canvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

body {
    display: grid;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
}

canvas {
  height: 80vh; 
  width: 80vw; 
  display: block;
}

<html>
  <body>
        <canvas></canvas>
  </body>
</html>

ขยายข้อมูลโค้ด