ऊर्ध्वाधर-संरेखण क्यों है: मध्य मेरे स्पैन या डिव पर काम नहीं कर रहा है?

Question

मैं खड़ी एक केंद्र के लिए कोशिश कर रहा हूँ spanया divएक और भीतर तत्व divतत्व। हालाँकि जब मैं डालता हूँ vertical-align: middle, तब कुछ नहीं होता। मैंने displayदोनों तत्वों के गुणों को बदलने की कोशिश की है , और कुछ भी काम नहीं करता है।

यह मैं वर्तमान में अपने वेबपेज में कर रहा हूं:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

यहाँ कार्यान्वयन का एक jsfiddle दिखा रहा है कि यह काम नहीं करता है: http://jsfiddle.net/gZXWC/

Answer 1

यह सबसे अच्छा तरीका लगता है - मेरे मूल पद से कुछ समय बीत चुका है और अब यही होना चाहिए: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Comments

तो कोई कैसे करता है जो ओपी करना चाहता है?

— रयान मोर्टेंसन

वैरिएबल लाइन पैराग्राफ पर कोई विचार? अर्थात। अगर यह जानने का कोई तरीका नहीं है कि क्या यह एक या दो लाइनें होगी। क्या मुझे तब jQuery का उपयोग करने की आवश्यकता होगी?

— foochow

क्या होगा यदि ऊंचाई गतिशील होनी चाहिए, तो समाधान क्या है?

— मुराफ सूसली

स्वीकृत उत्तर नहीं होना चाहिए, '.inner' की ऊँचाई जानने पर निर्भर करता है, इसलिए ऐसा बिल्कुल नहीं है कि ओपी क्या पूछ रहा था और नीचे कुछ बेहतर जवाब देखें @timbergus या टिम पर्किन्स के जवाब नीचे दिए गए तरीके से हैं।

— माइक-स्रोत

@ माइके-सोर्स आंतरिक की ऊँचाई को जानना 100% संभव है, भले ही ऊँचाई गतिशील हो, क्योंकि थोड़ी सी जावास्क्रिप्ट इस बात का पता लगा सकती है और उस डोम ऑब्जेक्ट के लिए सीएसएस नियम को गतिशील रूप से बदल सकती है।

— चार्ल्स एडिस

Answer 2

CSS3 का उपयोग करना:

<div class="outer">
   <div class="inner"/>
</div>

सीएसएस:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

नोट: यह पुराने IE में काम नहीं कर सकता है

Comments

यह सभी प्रमुख आधुनिक ब्राउज़रों द्वारा और सबसे सरल और साफ समाधान द्वारा समर्थित है।

— सैम

inline-flexआंतरिक तत्व के अंदर एक पंक्ति में कई तत्वों को रखने का भी ध्यान रखें ।

— डैन निसेनबाम

मेरे मामले में, चूंकि मैं क्षैतिज रूप से भी .inner की सामग्री को केंद्र में रखना चाहता था, इसलिए मुझे जोड़ना पड़ा .inner { width: 100%; }। इस तरह, यह .outer { display: table; } .inner { display: table-cell; vertical-align: middle; }एक न्यूनतम चौड़ाई मजबूर किए बिना काम करने जैसा लगता है ।

— एस

मैं justify-content: center;क्षैतिज रूप से संरेखित करता था जो महान काम करता था

— रूथ यंग

Answer 3

यह कोशिश करो, मेरे लिए बहुत अच्छी तरह से काम करता है:

/* 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;

Comments

उत्कृष्ट जवाब, इसने मुझे एक पूरी तरह से काम करने वाला समाधान दिया है जो अन्य नॉक-ऑन मुद्दों (jquerymobile + phonegap का उपयोग करने वाला ऐप और अन्य सभी समाधान css & div sizing मुद्दों का नेतृत्व करता है) का कारण नहीं बना है। केवल यह इंगित करने के लिए कि इन मापदंडों को एक सीएसएस ब्लॉक में जोड़ा जाना है, जो तत्वों को केंद्रित / मिडिल्ड करने के लिए विशिष्ट है, जैसे: #element span {height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}- ध्यान दें कि यह सुनिश्चित करने के लिए ऊंचाई महत्वपूर्ण है कि उसके कंटेनर की पूरी ऊंचाई विरासत में मिली (शायद एक div) अन्यथा आपको अभी भी वर्टिकल सेंटरिंग नहीं मिलेगी!

— एंडी लोरेन्ज

BTW, आप ब्राउज़र के उपसर्ग के बिना मानक फ्लेक्सबॉक्स कोड लिख सकते हैं और फिर ऑटोप्रिफ़िशर github.com/postcss/autoprefixer के साथ या ऑनलाइन डेमो simevidas.jsbin.com/baboko/quiet

— Starikovs के

अवैध संपत्ति के मूल्य boxमेंdisplay

— Joaquinglezsantos

इसके अलावा, @ user1782556 का जवाब बेहतर काम करता है जब बाहरी बॉक्स में पैडिंग होती है।

— अतिसूक्ष्मता

Answer 4

रेखा-ऊँचाई को उसी ऊँचाई पर सेट करना जितना कि इसमें div है, भी काम करेगी

डेमो http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Comments

मैंने एक लिंक पोस्ट किया जो उस तरीके को भी समझाता है। हालांकि मेरा पसंदीदा तरीका नहीं है, अगर बाकी लेआउट आकार में तय नहीं है - मैं इस पद्धति के साथ विभिन्न आकार के व्यूपोर्ट में मुद्दों पर चला हूं।

— चार्ल्स एडिस

हां लाइन-ऊंचाई तकनीक अच्छी तरह से काम करती है, लेकिन केवल यदि आपके पास एकल-पंक्ति सामग्री है। अतिरिक्त लाइनें खो जाएंगी / कंटेनर के बाहर फैल जाएगी और आपको फिर से शुरू करने की आवश्यकता होगी!

— एंडी लोरेन्ज

a) line-heightआंतरिक तत्व की ऊंचाई भी बदल देगा। ख) आंतरिक तत्व अभी भी लंबवत केंद्रित नहीं है। ग) यह उन तत्वों पर काम नहीं करता है जिनमें पाठ नहीं है, उदाहरण के लिए: <img>या निश्चित ऊंचाई वाले तत्व।

— अल्फ.डेव

फ़ॉन्ट-रेंडरिंग अंतर के कारण यह क्रॉस-ओएस (विंडोज / मैक) भी विफल हो सकता है

— लोकलपीसीयू

यह बहुत अप्रत्याशित है और अक्सर कंटेनर पर अतिरिक्त ऊंचाई होती है।

— अंडरस्टैंडिंग

Answer 5

मामले में आप flexbox पर भरोसा नहीं कर सकते ... केंद्र .childमें रखें .parent। काम करता है जब पिक्सेल आकार अज्ञात (दूसरे शब्दों में, हमेशा) और IE9 + के साथ कोई समस्या नहीं है।

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Comments

यह वास्तव में सबसे अच्छी तरह से किया गया समाधान है, खासकर जब से अधिकांश परियोजनाओं में मैंने अब तक IE9 संगतता की आवश्यकता देखी है

— Jabberwocky

Answer 6

आप रखना चाहिए vertical-align: middleआंतरिक तत्व, पर नहीं बाहरी तत्व। line-heightबाहरी तत्व से मेल खाने के लिए बाहरी तत्व पर गुण सेट करें height। फिर सेट करें display: inline-blockऔर line-height: normalआंतरिक तत्व पर। ऐसा करने से, आंतरिक तत्व पर पाठ एक सामान्य रेखा-ऊंचाई के साथ लपेट जाएगा। Chrome, Firefox, Safari और IE 8+ में काम करता है

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

बेला

Comments

यह संभवत: सबसे सरल तरीका है ... इस पृष्ठ पर अन्य सभी उत्तर अनावश्यक रूप से गुप्त / हैक किए गए हैं या पुराने ब्राउज़रों में समर्थित नहीं हैं या आंतरिक तत्व की ऊंचाई जानने पर निर्भर हैं। आप वास्तव में जरूरत नहीं है line-height: normal;और display:inline;भी काम करता है। इस पद्धति का बोनस वह है text-align:center;जो इसमें हस्तक्षेप नहीं करता है , जिसके उपयोग से display: table-cell;समस्याएं पैदा हो सकती हैं। अक्सर हम क्षैतिज और साथ ही लंबवत संरेखित करना चाहते हैं। इस संपादित फिडेल को देखें: jsfiddle.net/br090prs/36

— माइक-स्रोत

@ माइक-स्रोत उपयोग करने का कारण है line-height: normalऔर display: inline-blockयह इतना है कि आंतरिक पाठ ठीक से लपेटेगा। यदि आपको यकीन है कि आंतरिक div में पाठ कभी नहीं लिपटेगा तो ये गुण आवश्यक नहीं होंगे।

— टिम पर्किन्स

जब से Microsoft ने IE के पुराने संस्करणों के लिए समर्थन समाप्त कर दिया है, मैंने इस तरह की चीज़ के लिए फ्लेक्सबॉक्स का उपयोग किया है (जैसा कि @ user1782556 ने सुझाव दिया है)। यदि आप अभी भी IE 10 या पुराने का समर्थन करने की आवश्यकता है, तो मेरा मूल उत्तर रास्ता है।

— टिम पर्किन्स

100% सहमत हैं, लेकिन मैं व्यक्तिगत रूप से अभी भी फ्लेक्स बॉक्स के लिए नहीं जाऊंगा, केवल 76% ब्राउज़र पूरी तरह से मई 2016 तक इसका समर्थन करते हैं (94% यदि आप आंशिक समर्थन शामिल करते हैं), देखें: caniuse.com/#search=flexible% 20 बॉक्स । यह सबसे समझदार विकल्प होने के बहुत करीब है, हालांकि, आपके उपयोगकर्ता आधार पर निर्भर करता है।

— माइक-सोर्स

Answer 7

मैंने इसका इस्तेमाल रैपर डिव के केंद्र में सबकुछ संरेखित करने के लिए किया था जब यह किसी को मदद करता है - मुझे यह सबसे सरल लगा:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Answer 8

यहां आपके पास वर्टिकल अलाइनमेंट करने के दो तरीकों का उदाहरण है। मैं उनका उपयोग करता हूं और वे बहुत अच्छा काम करते हैं। एक पूर्ण स्थिति का उपयोग कर रहा है और दूसरा फ्लेक्सबॉक्स का उपयोग कर रहा है ।

कार्यक्षेत्र संरेखित उदाहरण

Flexbox का उपयोग करके आप एक तत्व अपने आप में एक और तत्व के अंदर से तालमेल कर सकते हैं display: flex;का उपयोग कर align-self। यदि आपको इसे क्षैतिज रूप से भी संरेखित करने की आवश्यकता है, तो आप उपयोग कर सकते हैं align-itemsऔरjustify-content कंटेनर में।

यदि आप flexbox का उपयोग नहीं करना चाहते हैं, तो आप स्थिति गुण का उपयोग कर सकते हैं। यदि आप कंटेनर को सापेक्ष बनाते हैं और सामग्री निरपेक्ष है, तो सामग्री कंटेनर के अंदर स्वतंत्र रूप से ले जाने में सक्षम होगी। इसलिए यदि आप उपयोग करते हैं top: 0;और left: 0;सामग्री में, यह कंटेनर के ऊपरी बाएं कोने पर स्थित होगा।

फिर, इसे संरेखित करने के लिए, आपको केवल शीर्ष और बाएं संदर्भ को 50% में बदलने की आवश्यकता है। यह सामग्री के शीर्ष बाएं कोने से कंटेनर केंद्र में सामग्री को स्थिति देगा।

तो आपको इस सामग्री को उसके आधे और ऊपर के आकार का अनुवाद करके सही करने की आवश्यकता है।

Answer 9

यहाँ कैसे vetical संरेखित करने का एक शानदार लेख है .. मुझे फ्लोट तरीका पसंद है।

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

और इसी शैली:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

Comments

मुझे लगता है कि यदि आप # प्रखंड की ऊंचाई को परिभाषित करते हैं तो यह उचित ऊर्ध्वाधर केंद्र की अवधारणा को अमान्य करता है। ओपीएस इसे स्वचालित बनाने के लिए कह रहा था, इसलिए मैं कल्पना करूंगा कि गर्भाधान के समय आंतरिक बॉक्स की ऊंचाई ज्ञात नहीं है।

— एलेक्सिस विलके

Answer 10

एचटीएमएल

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

सीएसएस

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

हम तालिका के रूप में प्रदर्शित करने के लिए पैरेंट डिव को सेट करते हैं और बच्चे को टेबल-सेल के रूप में प्रदर्शित करने के लिए div। फिर हम चाइल्ड डिव पर लंबवत-संरेखित कर सकते हैं और इसके मान को मध्य में सेट कर सकते हैं। इस बाल दिवस के अंदर कुछ भी लंबवत केंद्रित होगा।

Answer 11

यह आसान है। बस display:table-cellअपने मुख्य वर्ग में जोड़ें ।

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

इस jsfiddle की जाँच करें !

Answer 12

यहाँ नवीनतम सरलतम समाधान है - कुछ भी बदलने की आवश्यकता नहीं है, बस सीएसएस नियमों की तीन पंक्तियाँ उस डिव के अपने कंटेनर में जोड़ें जहाँ आप केंद्र में आना चाहते हैं। मुझे Flex Box#LoveFlexBox बहुत पसंद है

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

बक्शीश

justify-contentमूल्य निम्नलिखित कुछ विकल्प सेट किया जा सकता:

• flex-start, जो बच्चे को div को संरेखित करेगा जहां फ्लेक्स प्रवाह उसके मूल कंटेनर में शुरू होता है। इस मामले में, यह शीर्ष पर रहेगा।

• center, जो बच्चे को उसके मूल कंटेनर के केंद्र में संरेखित करेगा। यह वास्तव में साफ-सुथरा है, क्योंकि आपको बच्चों को केन्द्र में रखने के लिए एक अतिरिक्त डिव को एक पेरेंट कंटेनर में रैपर लगाने के लिए जोड़ने की जरूरत नहीं है। उसकी वजह से, यह सही वर्टिकल सेंटर है ( column flex-directionइसी तरह, अगर आप इसे बदल देते flow-directionहैं row, तो यह क्षैतिज रूप से केंद्रित हो जाएगा।

• flex-end, जो चाइल्ड डिव को संरेखित करेगा जहां फ्लेक्स प्रवाह उसके मूल कंटेनर में समाप्त होता है। इस मामले में, यह नीचे की ओर जाएगा।

• space-between, जो प्रवाह की शुरुआत से अंत तक सभी बच्चों को फैलाएगा। यदि डेमो, मैंने एक और चाइल्ड डीवाई जोड़ा, यह दिखाने के लिए कि वे बाहर फैले हुए हैं।

• space-aroundके समान है space-between, लेकिन प्रवाह की शुरुआत और अंत में अंतरिक्ष के आधे हिस्से के साथ ।

Comments

सही समाधान। असंगत ब्राउज़र सामग्री को अनसाइन कर सकते हैं और उपयोगकर्ता को उससे निपटना होगा या अपने ब्राउज़र को अपग्रेड करना होगा।

— जूनियर

Answer 13

चूंकि vertical-alignउम्मीद के मुताबिक काम करता है td, आप इसकी सामग्री को संरेखित करने tableके divलिए एक एकल सेल लगा सकते हैं ।

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

क्लंकी, लेकिन जहां तक ​​मैं बता सकता हूं, काम करता है। इसमें अन्य वर्कअराउंड की कमियां नहीं हो सकती हैं।

Comments

नहीं, कृपया, अब कोई तालिका नहीं। सीएसएस एक साफ तरीके से कर सकता है। इस मामले में <table> का उपयोग करने की कोई आवश्यकता नहीं है।

— इंग्लैंड

Answer 14

बस सामग्री को 100% ऊंचाई वाली तालिका के अंदर रखें, और मुख्य div के लिए ऊँचाई सेट करें

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Answer 15

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

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

सीएसएस:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 16

यह एक आधुनिक दृष्टिकोण है और यह CSS फ्लेक्सबॉक्स कार्यक्षमता का उपयोग करता है। अब आप केवल इन शैलियों को .mainकंटेनर में जोड़कर सामग्री को अपने मूल कंटेनर में लंबवत रूप से संरेखित कर सकते हैं

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

और आप जाने के लिए अच्छे हैं!