दिलचस्प पोस्ट
PHP के साथ एक निर्देशिका की पदानुक्रम प्राप्त करें कैच ब्लॉक में फेंक दिया अपवाद – फिर से पकड़ा जाएगा? PHP में वास्तविक समय आउटपुट के साथ चलाना प्रक्रिया Android स्टूडियो प्रोजेक्ट के लिए मेरे .gitignore में क्या होना चाहिए? एसक्यूएल सर्वर से टीसीपी \ आईपी रिमोट कनेक्शन सक्षम करें पहले से ही कोड या स्क्रिप्ट (क्वेरी) के साथ डेटाबेस स्थापित है जावा रिएन्ट्रंटरेडड्राइटलेक्स – कैसे सुरक्षित रूप से लॉक लॉक प्राप्त करें? जावा की छुपी हुई विशेषताएं Git repos के लिए मैं समान स्ट्रिंग कैसे सक्षम करूं? 80 के 1 अप्रैल तिथियां आईओएस 10.0 में पार्स करने में विफल रही हैं SimpleDateFormat का उपयोग करते हुए कई प्रारूपों में तारीखों को कैसे विश्लेषित करें कच्चे यूडीपी पैकेटों को कैसे संसाधित करें ताकि वे एक डायोड-शॉ स्रोत फिल्टर में डीकोडर फिल्टर द्वारा डीकोड कर सकें क्या विशेष रूप से दीवार-घड़ी-समय, उपयोगकर्ता-सीपीयू-टाइम, और यूनिक्स में सिस्टम-सीपीयू-टाइम हैं? PHP – साहचर्य सरणी की शुरुआत के लिए आइटम जोड़ें क्या GDI GetPixel () के लिए एक तेज़ विकल्प है? अपलोड की गई फाइलों की संख्या की गणना और सीमित करें (HTML फ़ाइल इनपुट)

सीएसएस 3 का प्रयोग करके खड़ी संरेखित करें

सीएसएस 3 के साथ, क्या किसी ब्लॉक तत्व को लंबवत रूप से संरेखित करने का कोई तरीका है? आपके पास कोई उदाहरण है? धन्यवाद।

Solutions Collecting From Web of "सीएसएस 3 का प्रयोग करके खड़ी संरेखित करें"

हाल ही में इस समस्या को देख रहा था, और कोशिश की:

HTML:

<body> <div id="my-div"></div> </body> 

सीएसएस:

 #my-div { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; background: red; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } 

यहाँ बेला है:

http://jsfiddle.net/sTcp9/6/

निश्चित आयामों के स्थान पर "चौड़ाई / ऊंचाई: ऑटो" का उपयोग करते समय यह काम भी करता है फ़ायरफ़ॉक्स, क्रोम और आईई (* हांफी *) पर नवीनतम संस्करणों पर परीक्षण किया गया।

नोट: यह उदाहरण फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के मसौदा संस्करण का उपयोग करता है। असंगत आधुनिक विनिर्देश द्वारा इसे स्थानांतरित कर दिया गया है

बॉक्स-संरेखित करें और बॉक्स-पैक गुणों का एक साथ उपयोग करके एक डिवि बॉक्स के बच्चे तत्वों को केंद्र में रखें।

उदाहरण:

 div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } 

फ्लेक्सबॉक्स का उपयोग करना:

 .container { display: flex; /* Vertical align: */ align-items: center; /* Horizontal align: */ justify-content: center; } 

जेएसफ़िल्ड: http://jsfiddle.net/maars/8Uyvf

ब्राउज़र समर्थन: http://caniuse.com/flexbox (कुछ ब्राउज़र को उपसर्ग की आवश्यकता होती है)

कुछ तरीके:

1. निरपेक्ष स्थिति – आपको यह काम करने के लिए घोषित ऊंचाई की आवश्यकता है:

 <div> <div class='center'>Hey</div> </div> div {height: 100%; width: 100%; position: relative} div.center { width: 100px; height: 100px; top: 50%; margin-top: -50px; } 

* 2. डिस्प्ले का प्रयोग करें: तालिका http://jsfiddle.net/B7CpL/2/ *

 <div> <img src="/img.png" /> <div class="text">text centered with image</div> </div> div { display: table; vertical-align: middle } div img, div.text { display: table-cell; vertical-align: middle } 
  1. डिस्प्ले का उपयोग करते हुए अधिक विस्तृत ट्यूटोरियल: टेबल

http://css-tricks.com/vertically-center-multi-lined-text/

सीएसएस में खड़ी और क्षैतिज एक डिवाइन को संरेखित करने का एक आसान तरीका है।

बस अपने डिवा में एक ऊंचाई लगा और इस शैली को लागू करें

 .hv-center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

उम्मीद है कि यह मदद मिलेगी

मैं हमेशा ट्यूटोरियल का इस्तेमाल इस लेख से लेकर केंद्र चीजों तक कर रहा हूं। यह बहुत अच्छा है

 div.container3 { height: 10em; position: relative } /* 1 */ div.container3 p { margin: 0; position: absolute; /* 2 */ top: 50%; /* 3 */ transform: translate(0, -50%) } /* 4 */ 

आवश्यक नियम हैं:

  1. कंटेनर को अपेक्षाकृत स्थिति बनाएं, जो इसे पूरी तरह से तैनात तत्वों के लिए एक कंटेनर घोषित करता है।
  2. तत्व को बिल्कुल बिल्कुल तैनात करना
  3. यह कंफ़ानर के नीचे 'शीर्ष: 50%' के साथ रखें। (ध्यान दें कि 50% 'का मतलब कंटेनर की ऊंचाई का 50% है।)
  4. तत्व को अपनी आधा ऊंचाई तक ले जाने के लिए अनुवाद का उपयोग करें ('50%' में अनुवाद '(0, -50%)' तत्व की ऊंचाई को संदर्भित करता है।)

यह भी पूरी तरह से काम करने की कोशिश करें:

एचटीएमएल:

  <body> <div id="my-div"></div> </body> 

सीएसएस:

 #my-div { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; background: red; display: table-cell; vertical-align: middle } 

आप प्रदर्शित करने के लिए तत्व सेट करके खड़ी संरेखित कर सकते हैं: इनलाइन-ब्लॉक, फिर ऊर्ध्वाधर-संरेखित करें: मध्य;