पूर्ण स्थिति को केंद्र में कैसे संरेखित करें?

मैं दो कैनवास को एक साथ ढेर करने और इसे डबल परत कैनवास बनाने की कोशिश कर रहा हूं।पूर्ण स्थिति को केंद्र में कैसे संरेखित करें?

मैं यहाँ एक उदाहरण देखा है:

<div style="position: relative;"> 
<canvas id="layer1" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="layer2" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div>

लेकिन मैं स्क्रीन के केंद्र में कैनवास संरेखित के दोनों सेट करना चाहते हैं। यदि मैं स्थिर के रूप में 'बाएं' का मान सेट करता हूं, जबकि मैं स्क्रीन के अभिविन्यास को बदलता हूं (जैसा कि मैं आईपैड पर एपी कर रहा हूं) कैनवास स्क्रीन के बीच में नहीं रहेगा जैसे यह

में कैसे कार्य करता है

<div align="center">

क्या कोई मदद कर सकता है?

स्रोत

2011-10-11 PaulLing

आप उपयोग कर ?:

left:50%; 
top:50%; 
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

सुनिश्चित नहीं हैं कि अगर यह काम करेंगे की कोशिश की है, लेकिन यह एक कोशिश के लायक है ...

माइनर संपादित: के रूप में जोड़ा गया margin-left हिस्सा है, चेतन द्वारा टिप्पणी पर कहा ...

स्रोत

2011-10-11 02:17:04 Deleteman

हां मैं कोशिश की है, लेकिन कैनवास मध्य से "शुरू" है लेकिन स्क्रीन के बीच में "रखा" नहीं है। क्या बाएं सेट करने के लिए वैसे भी है: 50% और कैनवास को फिर से छोड़ दें? – PaulLing

@ पॉलिंग 'मार्जिन-बाएं: <ऋणात्मक आधे चौड़ाई> ' –

क्या चेतन ने कहा .. मुझे इसे हराया: पी मैं भविष्य की पीढ़ियों के लिए अपनी प्रतिक्रिया संपादित करूंगा ... – Deleteman

left: 50%; 
top: 50%; 
margin-left: -50px;

के साथ बीच करने के लिए माता पिता div ले जाएँ

position: relative; 
left: -100px;

स्रोत

2011-10-11 02:39:14 Spencer

-6

साथ एक दूसरे के ऊपर दूसरी परत ले जाएँ बस का उपयोग करें: मैं और कुछ नहीं करते हैं, क्यों, लेकिन चीजों की सबसे html5

<html> 
<body> 

<div style="margin-left:25%"> 


// 

</div> 

</body> 
</html>

स्रोत

2013-01-31 02:37:05

यह उत्तर baaaddd है ... अपने ज्ञान आदमी को सुधारें – Gags

127

साथ काम करता है आप सेट नहीं है, तो पता नहीं है दोनों बाएं और दाएं शून्य, और ऑटो के लिए बाएं और दाएं मार्जिन आप एक बिल्कुल स्थित तत्व को केंद्रित कर सकते हैं।

position:absolute; 
left:0; 
right:0; 
margin-left:auto; 
margin-right:auto;

स्रोत

2013-09-22 04:09:40 Andrew

क्या आपको तत्व को चौड़ाई देने की भी आवश्यकता नहीं है? –

मुझे नहीं लगता कि यह इस मामले में आवश्यक है। – Andrew

बस यह कोशिश की और यह काम करता है, इसे सही उत्तर –

आपको बस इतना करना है,

सुनिश्चित करें कि आपके माता-पिता DIV कर स्थिति है: रिश्तेदार

और तत्व आप केंद्र चाहते हैं, यह एक ऊंचाई और चौड़ाई निर्धारित किया है। निम्नलिखित सीएसएस

.layer { 
    width: 600px; height: 500px; 
    display: block; 
    position:absolute; 
    top:0; 
    left: 0; 
    right:0; 
    bottom: 0; 
    margin:auto; 
    } 
http://jsbin.com/aXEZUgEJ/1/

स्रोत

2013-12-04 05:28:07 STEEL

केवल समाधान जो मेरे लिए काम करता है। अभिभावक फ्लेक्स, फ्लेक्स-ग्रोइंग और ओवरफ्लो पर सेट है। माता-पिता से बड़ी छवियों के लिए बच्चे को फ्रेम से बाहर रखा गया था। ऐसा लगता है कि माता-पिता की चौड़ाई के बारे में पता नहीं था। यह अभी तय है। बहुत धन्यवाद! – Kai

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

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

उदाहरण:

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
section{ 
 
    background:red; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
div{ 
 
    width: 80vw; 
 
    height: 80vh; 
 
    background: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<section> 
 
    <div> 
 
    <h1>Popup</h1> 
 
    </div> 
 
</section>

स्रोत

2016-01-27 22:10:27

यह एक ऐसा उत्तर है जो मेरे लिए काम करता है। धन्यवाद! –

position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
margin: auto;

स्रोत

2017-02-21 14:05:39

पूर्ण स्थिति को केंद्र में कैसे संरेखित करें?

उत्तर

संबंधित मुद्दे