एचटीएमएल 5 में कैनवास को कैसे केंद्र करें

Question

मैं थोड़ी देर के लिए एक समाधान के लिए खोज रहा हूँ, लेकिन कुछ भी नहीं मिला है। शायद यह सिर्फ मेरी खोज की शर्तें हैं। खैर, मैं ब्राउज़र विंडो के आकार के अनुसार कैनवास केंद्र बनाने की कोशिश कर रहा हूं। कैनवास 800x600 है। और अगर खिड़की 800x600 से नीचे हो जाती है, तो इसे भी आकार बदलना चाहिए (लेकिन यह इस समय बहुत महत्वपूर्ण नहीं है)

Comments

मैं यह कैसे कहूं कि आयाम देते हुए और पुन: आकार देते समय स्क्रॉल किए बिना पूर्ण पृष्ठ कैनवास बनाने के लिए?

— जॉर्गेन

इसे HTML में न करें .. इसे जावास्क्रिप्ट के साथ करें, एपेंडचाइल्ड या किसी चीज जैसे सामान का उपयोग करें और window.innerWidth और window.innerHeight

— JinX

Answer 1

कैनवास को निम्नलिखित सीएसएस शैली गुण दें:

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 का उपयोग करें।

Comments

प्रदर्शन क्षेत्र; और मार्जिन: 0 ऑटो 0 ऑटो; काफी है। धन्यवाद!

— क्रिस

एक कैनवास को लंबवत रूप से केंद्रित करने के लिए, जब तक आप इसे HTML में निर्दिष्ट करते हैं, तब तक आपको इसमें चौड़ाई और ऊंचाई डालने की आवश्यकता नहीं होती है। क्रोम पर, वैसे भी।

— Zac

चौड़ाई और ऊंचाई को सीएसएस या एचटीएमएल में निर्दिष्ट किया जा सकता है। लेकिन सीएसएस अनुशंसित तरीका है क्योंकि सभी प्रस्तुति तर्क को वहां जाना चाहिए।

— मार्को लुग्लियो

यह कैनवास को केन्द्रित कर रहा है, लेकिन यदि कैनवास पर चित्र खींचा गया है, तो यह खिंच रहा है। क्या आप चित्र को बिना खींचे कैनवास को केन्द्रित कर सकते हैं

— आर्यन

कैनवास तत्व पर इनलाइन शैलियों में ऊंचाई और चौड़ाई सेट करना मेरी खींची गई छवियों और इस तरह के आकारों को गड़बड़ कर देता है। बस एक कैवेट जो किसी को कुछ हताशा से बचाने की उम्मीद करेगा।

— MrBoJangles

Answer 2

आप अपने कैनवास को ff CSS गुण दे सकते हैं:

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

Comments

क्या आप एक jsfiddle प्रदान कर सकते हैं? यह दृष्टिकोण काम नहीं करता है

— jose.angel.jimenez

यह क्षैतिज केंद्र के लिए काम करता है, लेकिन ऊर्ध्वाधर केंद्र नहीं।

— मैटी जे

Answer 3

बस HTML में div केंद्र:

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

Comments

भाग्यशाली है, मुझे आपकी पोस्ट करने के तुरंत बाद इसकी आवश्यकता थी। :)

— mcandre

यदि कैनवास कंटेनर से छोटा है तो यह काम नहीं करता है।

— SystemicPlural

Answer 4

कैनवास तत्व को क्षैतिज रूप से केन्द्रित करने के लिए, आपको इसे ब्लॉक स्तर के रूप में निर्दिष्ट करना होगा और इसके बाएँ और दाएँ मार्जिन गुणों को ब्राउज़र पर छोड़ना होगा:

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

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

Answer 6

इस कोड का उपयोग करें:

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

Answer 7

मेरे पास एक ही समस्या है, क्योंकि मेरे पास कई अलग-अलग चौड़ाई के चित्र हैं, जिन्हें मैं केवल ऊंचाई की जानकारी के साथ लोड करता हूं। एक चौड़ाई सेट करने से ब्राउज़र को तस्वीर को खींचने और निचोड़ने की अनुमति मिलती है। मैं इमेज_टैग लाइन को केंद्रित करने से पहले टेक्स्ट लाइन होने से समस्या का समाधान करता हूं (फ्लोट से छुटकारा पा रहा है: बाएं)। मुझे पाठ को संरेखित करना पसंद आया होगा, लेकिन यह एक छोटी सी अनिश्चितता है, जिसे मैं सहन कर सकता हूं।

Answer 8

text-align: center;के मूल टैग में जोड़ें <canvas>। बस।

उदाहरण:

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

Comments

यह तब सीएसएस का उपयोग करना सरल है

— क्लिफ्टन एविल डिसूजा