ऊर्ध्वाधर-संरेखित करें बूटस्ट्रैप 3 के साथ

Question

मैं ट्विटर बूटस्ट्रैप 3 का उपयोग कर रहा हूं, और मुझे समस्या है जब मैं लंबवत रूप से दो संरेखित करना चाहता हूं div, उदाहरण के लिए - JSFiddle लिंक :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

बूटस्ट्रैप में ग्रिड सिस्टम उपयोग करता है float: left, नहीं display:inline-block, इसलिए संपत्ति vertical-alignकाम नहीं करती है। मैंने margin-topइसे ठीक करने के लिए उपयोग करने की कोशिश की , लेकिन मुझे लगता है कि यह उत्तरदायी डिजाइन के लिए एक अच्छा समाधान नहीं है।

Comments

नहीं नहीं, मैं लंबवत 2 संरेखित करना चाहता हूं div, अंदर कोई पाठ नहीं, कुछ इस तरह से jsfiddle.net/corinem/Aj9H9 लेकिन इस उदाहरण में मैं बूटस्ट्रैप का उपयोग नहीं करता हूं

— corinem

कैसे बूटस्ट्रैप में ऊर्ध्वाधर संरेखित करने के लिए

— क्रिस मोस्चीनी

महत्वपूर्ण: दोनों स्तंभों को "vcenter" वर्ग की आवश्यकता है। अन्यथा यह काम नहीं करेगा। अब केवल एक घंटे का समय बिताया।

— सिम्रो

उत्तर में से कोई भी क्रोम IE8 और मोबाइल पर मेरे लिए पूरी तरह से काम नहीं करता है जिसमें 5 कॉल- (और 3

— कॉल-

बूटस्ट्रैप 4 में, ऊर्ध्वाधर केंद्र संरेखण बहुत अलग है: stackoverflow.com/a/41464397/171456

— Zim

Answer 1

यह उत्तर एक हैक प्रस्तुत करता है, लेकिन मैं आपको फ्लेक्सबॉक्स का उपयोग करने की अत्यधिक सलाह दूंगा (जैसा कि @Haschem उत्तर में कहा गया है ), क्योंकि यह अब हर जगह समर्थित है।

डेमो लिंक:
- बूटस्ट्रैप 3
- बूटस्ट्रैप 4 अल्फा 6

जब आपको आवश्यकता हो तब भी आप एक कस्टम क्लास का उपयोग कर सकते हैं:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

inline-blockयदि आप अपने कोड (जैसे ...</div> </div>...) में वास्तविक स्थान देते हैं, तो ब्लॉक के बीच अतिरिक्त स्थान का उपयोग करना । यदि स्तंभ आकार 12 तक जोड़ते हैं तो यह अतिरिक्त स्थान हमारी ग्रिड को तोड़ देता है:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

यहां, हमें <div class="[...] col-lg-2">और <div class="[...] col-lg-10">(एक गाड़ी वापसी और 2 टैब / 8 रिक्त स्थान) के बीच अतिरिक्त स्थान मिला है । इसलिए...

चलो इस अतिरिक्त स्थान को लात मारो !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

सूचना प्रतीत होता है बेकार टिप्पणी <!-- ... -->? वे महत्वपूर्ण हैं - उनके बिना, <div>तत्वों के बीच व्हाट्सएप लेआउट में जगह ले लेगा, ग्रिड सिस्टम को तोड़ देगा।

नोट: बूटप्ले को अपडेट कर दिया गया है

Comments

यदि आप 12 (जैसे का उपयोग कर col-lg-2और col-lg-10) जोड़ने वाले स्तंभ ग्रिड निर्दिष्ट करते हैं तो यह टूट जाता है । दिलचस्प है, अगर आप निम्नलिखित जेएस कोड जोड़ते हैं (jQuery मानकर), तो यह स्वयं को ठीक करने का प्रबंधन करता है:$('.row').html($('.vcenter'));

— जेक जेड

@pasemes यह (प्रसिद्ध) inline-block अतिरिक्त स्थान के कारण होता है । मैं अपने संपादन में एक समाधान देता हूं।

— zessx

रिक्त टिप्पणियों के साथ हिस्सा गहरे, काले, बुरे जादू की तरह लगता है। और यह है। लेकिन किसी ने कहीं यह निर्णय लिया कि यह काम करना चाहिए, इसलिए यह करता है।

— cfstras

आश्चर्यचकित किसी ने अभी तक इसका उल्लेख नहीं किया है, लेकिन टिप्पणी के सामान के बजाय, आप "फ़ॉन्ट-आकार: 0" सेट कर सकते हैं; इनलाइन-ब्लॉक के माता-पिता पर "मिस्ट्री स्पेस" को हटाने के लिए

— Poff

अतिरिक्त स्थान समस्या को ठीक करने के लिए किसी भी HTML टिप्पणी का उपयोग करने की आवश्यकता नहीं है <! -> या कोई भी जावास्क्रिप्ट कोड, एक सरल और प्रभावी सीएसएस ट्रिक है: नकारात्मक मार्जिन। बस मार्जिन-राइट जोड़ें: -4 पीएक्स; को .vcenter वर्ग। सभी ब्राउज़रों के साथ परीक्षण और काम करना (पुराने IE6 और IE7 को छोड़कर ... लेकिन जो प्रागितिहास की परवाह करता है;))

— फ्रैंक

Answer 2

लचीला बॉक्स लेआउट

CSS फ्लेक्सिबल बॉक्स के आगमन के साथ , कई वेब डिज़ाइनर्स के बुरे सपने ¹ हल हो गए हैं। सबसे अधिक हैसी में से एक, ऊर्ध्वाधर संरेखण। अब यह अज्ञात ऊंचाइयों में भी संभव है ।

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

- W3Conf 2013 में सीएसएस लीजेंडरी एरिक मेयर

फ्लेक्सिबल बॉक्स (या संक्षेप में, फ्लेक्सबॉक्स), एक नया लेआउट सिस्टम है जिसे विशेष रूप से लेआउट उद्देश्यों के लिए डिज़ाइन किया गया है। विनिर्देश राज्यों :

फ्लेक्स लेआउट ब्लॉक लेआउट के समान सतही है। इसमें कई अधिक जटिल पाठ- या दस्तावेज़-केंद्रित गुणों का अभाव है, जिनका उपयोग ब्लॉक लेआउट में किया जा सकता है, जैसे कि फ़्लोट्स और कॉलम। बदले में यह अंतरिक्ष को वितरित करने और वेबैप और जटिल वेब पेजों में अक्सर सामग्री को संरेखित करने के लिए सरल और शक्तिशाली उपकरण प्राप्त करता है।

इस मामले में यह कैसे मदद कर सकता है? अच्छा चलो देखते हैं।

---

लंबवत संरेखित स्तंभ

ट्विटर बूटस्ट्रैप का उपयोग करके हम .rowकुछ .col-*एस कर रहे हैं। हम सभी को वांछित .row² को एक फ्लेक्स कंटेनर बॉक्स के रूप में प्रदर्शित करना है और फिर उसके सभी फ्लेक्स आइटम s (कॉलम) को align-itemsसंपत्ति द्वारा लंबवत संरेखित करना है ।

उदाहरण यहाँ (कृपया ध्यान से टिप्पणी पढ़ें)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

उत्पादन

रंगीन क्षेत्र स्तंभों के पैडिंग-बॉक्स को प्रदर्शित करता है।

पर स्पष्ट करना align-items: center

8.3 क्रॉस-अक्ष संरेखण: align-itemsसंपत्ति

फ्लेक्स आइटम को फ्लेक्स कंटेनर की वर्तमान लाइन के क्रॉस अक्ष में गठबंधन किया जा सकता है , justify-contentलेकिन समान दिशा में। align-itemsअनाम फ्लेक्स आइटम सहित सभी फ्लेक्स कंटेनर के आइटम के लिए डिफ़ॉल्ट संरेखण सेट करता है ।

align-items: center; केंद्र मूल्य द्वारा, फ्लेक्स आइटम का मार्जिन बॉक्स लाइन के भीतर क्रॉस अक्ष में केंद्रित होता है ।

---

बड़ा अलर्ट

महत्वपूर्ण नोट # 1: ट्विटर बूटस्ट्रैप widthअतिरिक्त छोटे उपकरणों में स्तंभों को निर्दिष्ट नहीं करता है जब तक कि आप किसी एक .col-xs-#वर्ग को कॉलम नहीं देते।

इसलिए इस विशेष डेमो में, मैंने .col-xs-*मोबाइल मोड में स्तंभों को ठीक से प्रदर्शित करने के लिए कक्षाओं का उपयोग किया है, क्योंकि यह widthकॉलम के स्पष्ट रूप से निर्दिष्ट करता है।

लेकिन वैकल्पिक रूप से आप सकता है स्विच बंद flexbox बदलकर बस लेआउट display: flex;के लिए display: block;विशिष्ट स्क्रीन आकार में। उदाहरण के लिए:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

या आप केवल विशिष्ट स्क्रीन आकारों पर ही निर्दिष्ट.vertical-align कर सकते हैं :

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

उस मामले में, मैं @ केविननेलसन के दृष्टिकोण के साथ जाऊँगा ।

महत्वपूर्ण नोट # 2: संक्षिप्तता के कारण वेंडर उपसर्ग छोड़े गए। फ्लेक्सबॉक्स सिंटैक्स को समय के दौरान बदल दिया गया है। नया लिखित सिंटैक्स वेब ब्राउज़र के पुराने संस्करणों पर काम नहीं करेगा (लेकिन इंटरनेट एक्सप्लोरर 9 के रूप में पुराना नहीं है! फ्लेक्सबॉक्स इंटरनेट एक्सप्लोरर 10 और बाद में समर्थित है)।

इसका मतलब है कि आपको display: -webkit-boxउत्पादन मोड में वेंडर-प्रीफ़िक्स किए गए गुणों का उपयोग करना चाहिए ।

यदि आप डेमो में "टॉगल संकलित दृश्य" पर क्लिक करते हैं , तो आपको सीएसएस घोषणाओं का पूर्वनिर्मित संस्करण ( ऑटोप्रेक्सिफ़र के लिए धन्यवाद ) दिखाई देगा।

---

ऊर्ध्वाधर संरेखित सामग्री के साथ पूर्ण-ऊंचाई वाले स्तंभ

जैसा कि आप पिछले डेमो में देखते हैं , कॉलम (फ्लेक्स आइटम) अब उनके कंटेनर (फ्लेक्स कंटेनर .rowमेनू) (तत्व) के रूप में अधिक नहीं हैं।

यह संपत्ति के centerलिए मूल्य का उपयोग करने के कारण है align-items। डिफ़ॉल्ट मान stretchइतना है कि आइटम मूल तत्व की पूरी ऊंचाई भर सकते हैं।

इसे ठीक करने के लिए, आप display: flex;कॉलम में भी जोड़ सकते हैं :

उदाहरण यहाँ (फिर, टिप्पणियों पर ध्यान दें)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

उत्पादन

रंगीन क्षेत्र स्तंभों के पैडिंग-बॉक्स को प्रदर्शित करता है।

अंतिम, लेकिन कम से कम , ध्यान दें कि लक्ष्य को प्राप्त करने के लिए आधुनिक दृष्टिकोण प्रदान करने के लिए, यहां डेमो और कोड स्निपेट्स आपको एक अलग विचार देने के लिए हैं। कृपया " बिग अलर्ट " अनुभाग को ध्यान में रखें यदि आप वास्तविक दुनिया की वेबसाइटों या अनुप्रयोगों में इस दृष्टिकोण का उपयोग करने जा रहे हैं।

---

ब्राउज़र समर्थन सहित आगे पढ़ने के लिए, ये संसाधन उपयोगी होंगे:

• मोज़िला डेवलपर नेटवर्क - लचीले बक्से
• गाइड टू फ्लेक्सबॉक्स - सीएसएस ट्रिक्स
• HTML5Rocks - फ्लेक्सबॉक्स त्वरित
• SmashingMagazine - Flexbox के साथ तत्वों को केंद्रित करना
• फिलिप वाल्टन - फ्लेक्सबॉक्स द्वारा हल किया गया
• क्या मैं उपयोग कर सकता हूं: फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल

---

^{1. खड़ी ऊंचाई के साथ एक div के अंदर एक छवि को संरेखित करें 2. ट्विटर बूटस्ट्रैप के डिफ़ॉल्ट को बदलने के लिए नहीं एक अतिरिक्त वर्ग का उपयोग करना बेहतर है .row।}

Comments

थोड़ा शोध के बाद, मुझे वास्तव में पता चला कि HTML5Please.com का कहना है कि इसका उपयोग करने के लिए पर्याप्त समर्थन है। तो यह बहुत बढ़िया है! html5please.com/#flexbox

— एलेक मूर

यह वास्तव में सबसे अच्छा समाधान है और इसमें अधिक समर्थन होना चाहिए। और निश्चित रूप से, हमें, डेवलपर्स को इसका प्रचार करने के लिए जितना संभव हो उतना उपयोग करना चाहिए।

— मेटुस नेव्स

मैंने यह कोशिश की और मेरे लिए अपेक्षित तरीके से काम नहीं कर रहा था, जब तक कि मैंने आपकी पहेलियों को संपादित नहीं किया और महसूस किया कि यह पूरी तरह से बेकार है और समय की बर्बादी है। यह करना पूरी तरह से उत्तरदायी डिजाइन की बात को याद करता है, क्योंकि जब वे स्क्रीन में फिट नहीं होते हैं तो कॉलम दूसरों के ऊपर एक भी नहीं टिकेगा, इस प्रकार बूटस्ट्रैप की आवश्यकता पूरी तरह से अप्रयुक्त और आपकी साइट को अप्रतिस्पर्धी प्रदान करता है। यह देखने के लिए कि मेरा क्या मतलब है, किसी भी col-xs- * को col-xs-12 से संबंधित उदाहरणों में बदलें, अपनी ब्राउज़र स्क्रीन को बहुत छोटा करें (मोबाइल डिवाइस की तरह) और परिणाम देखें: कोई और अधिक जवाबदेही नहीं।

— पेरे

@HashemQolami हालांकि आप नामित वर्गों का उपयोग कर रहे हैं col-*, आपके फ़ेल्ड / कोडपेन्स बूटस्ट्रैप का उपयोग नहीं कर रहे हैं, इसलिए वे भ्रामक हैं। आपके उदाहरण बूटस्ट्रैप के साथ काम नहीं करते हैं; इसकी ग्रिड प्रणाली पर आधारित नहीं है flex, इस प्रकार वे असंगत हैं। बस बूटस्ट्रैप-संचालित पेज में अपने उदाहरणों में से जो भी प्रयास करें और आप महसूस करेंगे कि वे काम नहीं करते हैं।

— पेरेस

@ हशम कोलोमी अभी भी आपके सुझावों के लिए कोई उपयोग मामला नहीं ढूँढ सकता है। बूटस्ट्रैप की मुख्य, विघटनकारी विशेषताओं में से एक यह है कि एक बार क्षैतिज रूप से फिट नहीं होने पर स्तंभ एक दूसरे के ऊपर ढेर हो जाते हैं। यह अब आपके समाधान के साथ नहीं होता है। ग्रिड सिस्टम तब भी काम करता है जब आप केवल शैलियों को लोड करते हैं, जैसा कि आप इस फिडेल में देख सकते हैं । कोई जे एस; बस सी.एस. रेंडरिंग क्षेत्र का आकार बदलें और यह प्रतिक्रिया देगा। यह आपके किसी भी उदाहरण में नहीं होता है। "मोबाइल पहले" दृष्टिकोण खो गया है, जिससे बूटस्ट्रैप अनावश्यक हो गया है। तो यह जवाब गलत है, भ्रामक या अधूरा है।

— पेरे

Answer 3

नीचे दिए गए कोड ने मेरे लिए काम किया:

.vertical-align {
    display: flex;
    align-items: center;
}

Comments

सरलतम समाधान IMHO

— saiyancoder

किसी को भी एक समाधान है कि एक एकल स्तंभ के साथ काम करता है? मुझे एक पंक्ति मिली, और फिर सिर्फ एक कॉल-एमडी -6 के अंदर। यह समाधान और बाकी फ्लेक्सबॉक्स केवल तब काम करते हैं जब 2 कॉलम होते हैं

— का मोक

Answer 4

अद्यतन 2020

मुझे पता है कि मूल प्रश्न बूटस्ट्रैप 3 के लिए था, लेकिन अब जबकि बूटस्ट्रैप 4 को जारी कर दिया गया है, यहां वर्टिकल सेंटर पर कुछ अद्यतन मार्गदर्शन है।

जरूरी! ऊर्ध्वाधर केंद्र माता-पिता की ऊंचाई के सापेक्ष है

यदि आपके द्वारा केंद्र में जाने वाले तत्व के माता-पिता की कोई परिभाषित ऊंचाई नहीं है , तो कोई भी लंबवत केंद्र समाधान नहीं करेगा!

बूटस्ट्रैप ४

अब जबकि बूटस्ट्रैप 4 डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स है , तो ऑटो-मार्जिन , फ्लेक्सबॉक्स बर्तनों या ऊर्ध्वाधर बर्तनों के साथ डिस्प्ले बर्तनों का उपयोग करके ऊर्ध्वाधर संरेखण के लिए कई अलग-अलग दृष्टिकोण हैं । पहले "वर्टिकल अलाइन यूटिल्स" स्पष्ट लगता है, लेकिन ये केवल इनलाइन और टेबल डिस्प्ले तत्वों के साथ काम करते हैं। यहां कुछ बूटस्ट्रैप 4 वर्टिकल सेंटरिंग विकल्प दिए गए हैं।

---

1 - ऑटो मार्जिन का उपयोग करते हुए लंबवत केंद्र:

लंबवत केंद्र का दूसरा तरीका उपयोग करना है my-auto। यह तत्व को उसके कंटेनर के भीतर केन्द्रित करेगा। उदाहरण के लिए, h-100पंक्ति को पूर्ण ऊँचाई देता है, और स्तंभ my-autoको लंबवत रूप से केंद्र करेगा col-sm-12।

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

बूटस्ट्रैप 4 - ऑटो-मार्जिन डेमो का उपयोग करके ऊर्ध्वाधर केंद्र

my-auto ऊर्ध्वाधर y- अक्ष पर मार्जिन का प्रतिनिधित्व करता है और इसके बराबर है:

margin-top: auto;
margin-bottom: auto;

---

2 - फ्लेक्सबॉक्स के साथ लंबवत केंद्र:

चूंकि बूटस्ट्रैप 4 .rowअब है, इसलिए display:flexआप इसे align-self-centerकिसी भी कॉलम पर वर्टिकली सेंटर करने के लिए उपयोग कर सकते हैं ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

या, align-items-centerसंपूर्ण .rowपंक्ति में सभी col-*पंक्ति में संरेखित करें पर उपयोग करें ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

बूटस्ट्रैप 4 - ऊर्ध्वाधर केंद्र विभिन्न ऊंचाई कॉलम डेमो

---

3 - प्रदर्शन बर्तन का उपयोग कर कार्यक्षेत्र केंद्र:

बूटस्ट्रैप 4 प्रदर्शन utils कि के लिए इस्तेमाल किया जा सकता display:table, display:table-cell, display:inline, आदि .. इन के साथ इस्तेमाल किया जा सकता लंबवत संरेखण utils संरेखित इनलाइन करने के लिए, इनलाइन-ब्लॉक या तालिका सेल तत्वों।

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

बूटस्ट्रैप 4 - प्रदर्शन बर्तन डेमो का उपयोग करते हुए ऊर्ध्वाधर केंद्र

इसे भी देखें: बूटस्ट्रैप 4 में वर्टिकल एलाइन सेंटर

---

बूटस्ट्रैप ३

आइटम के कंटेनर पर केंद्र में फ्लेक्सबॉक्स विधि:

.display-flex-center {
    display: flex;
    align-items: center;
}

ट्रांस्फ़ॉर्म अनुवाद विधि:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

इनलाइन विधि प्रदर्शित करें:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

बूटस्ट्रैप 3 केंद्रित तरीकों का डेमो

Comments

यहाँmx-auto (क्षैतिज केंद्र) के लिए बूटस्ट्रैप प्रलेखन है , इस प्रकार यह समझ में आता है कि my-autoकेंद्र लंबवत (y- अक्ष) है।

— १२:

Answer 5

Div के सीएसएस में यह प्रयास करें:

display: table-cell;
vertical-align: middle;

Comments

मूल तत्व को प्रदर्शित करने की आवश्यकता है: तालिका

— अज़

Answer 6

मुझे लगा कि मैं अपना "समाधान" साझा करूंगा, अगर यह किसी और की मदद करता है जो @media प्रश्नों से परिचित नहीं है।

@ HashemQolami के उत्तर के लिए धन्यवाद, मैंने कुछ मीडिया प्रश्नों का निर्माण किया जो कि मोबाइल की तरह काम करेंगे- * कक्षाएं ताकि मैं मोबाइल के लिए कॉलोनी को स्टैक कर सकूं - लेकिन उन्हें बड़े स्क्रीन के लिए केंद्र में लंबवत-संरेखित करें, जैसे

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

।

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

अधिक जटिल लेआउट जिन्हें स्क्रीन रिज़ॉल्यूशन के लिए अलग कॉलम की आवश्यकता होती है (उदाहरण के लिए -x के लिए 2 पंक्तियाँ, 3 -sm और 4 -md, आदि के लिए) कुछ और अधिक उन्नत फ़िन्गलिंग की आवश्यकता होगी, लेकिन -x के साथ एक साधारण पृष्ठ के लिए खड़ी और -सीएम और पंक्तियों में बड़ा, यह ठीक काम करता है।

Comments

मेरे मामले में मुझे clear: both;यह काम करने के लिए मीडिया प्रश्नों के अंदर कक्षाओं में जोड़ना पड़ा ।

— मोट्टा

@ मोट्टा, भ्रम के लिए खेद है ... बीएस 3 फैशन में, जैसा कि आप मेरे एचटीएमएल उदाहरण में देख सकते हैं, मैं .rowइसे एक संशोधक के रूप में उपयोग करता हूं ... इसलिए इसे देखना चाहिए class="row row-sm-flex-center"। बीएस 3 की .rowपरिभाषाclear:both;

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

मुझे आपके html कोड का अधिक अच्छी तरह से विश्लेषण करना चाहिए था। :) मैं .row संशोधक aswell का उपयोग करता हूं, लेकिन मेरे मामले में (वर्डप्रेस), इसे मूल विषय में बदल दिया गया है जिसने अंततः मुझे clear: both;फिर से जोड़ने का नेतृत्व किया ।

— मोटा

Answer 7

स्वीकृत उत्तर के बाद, यदि आप मार्कअप को अनुकूलित नहीं करना चाहते हैं, तो चिंताओं को अलग करने के लिए या क्योंकि आप सीएमएस का उपयोग करते हैं, निम्न समाधान ठीक काम करता है:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

यहाँ सीमा यह है कि आप मूल तत्व से फ़ॉन्ट आकार नहीं ले सकते क्योंकि पंक्ति सफेद स्थान को निकालने के लिए फ़ॉन्ट आकार को 0 पर सेट करती है।

Answer 8

मैं डेविड वाल्श वर्टिकल सेंटर CSS के अनुसार इस विधि को पसंद करता हूँ :

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

transformआवश्यक नहीं है, यह सिर्फ केंद्र को थोड़ा और सटीक पाता है। इंटरनेट एक्सप्लोरर 8 एक परिणाम के रूप में थोड़ा कम केंद्रित हो सकता है, लेकिन यह अभी भी खराब नहीं है - क्या मैं उपयोग कर सकता हूं - ट्रांसफॉर्म 2 डी ।

Answer 9

यह मेरा समाधान है। बस इस वर्ग को अपनी सीएसएस सामग्री में जोड़ें।

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

तब आपका HTML इस तरह दिखाई देगा:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

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

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Comments

यह उत्तरदायी कक्षाओं को तोड़ता है, जैसे कि col-md-6

— लुकास बस्टामांटे

Answer 10

मैंने बस यही किया है और यह वही करता है जो मैं करना चाहता हूं।

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

और अब मेरा पेज दिखता है

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Comments

इस दृष्टिकोण के साथ समस्या यह है कि यह तब काम नहीं करता है जब DIV की ऊंचाई निर्दिष्ट होती है: jsfiddle.net/4bpxen25/1 मैं

— सुझाऊंगा

Answer 11

मैं वर्तमान में चयनित उत्तर की तुलना में Chrome और अन्य ब्राउज़रों का उपयोग करके निम्नलिखित कोड कार्यों को वास्तव में पाता हूं:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

बूटली लिंक

आपको अपनी आवश्यकताओं के लिए ऊंचाइयों (विशेष रूप से .v-center) पर संशोधन करने और div को हटाने / बदलने की div[class*='col-']आवश्यकता हो सकती है।

Answer 12

मैं इसी मुद्दे में भाग गया। मेरे मामले में मुझे बाहरी कंटेनर की ऊंचाई का पता नहीं था, लेकिन मैंने इसे कैसे तय किया:

पहले अपने htmlऔर bodyतत्वों के लिए ऊंचाई निर्धारित करें ताकि वे 100% हों। यह महत्वपूर्ण है! इसके बिना, htmlऔर bodyतत्व बस अपने बच्चों की ऊंचाई विरासत में मिलेंगे।

html, body {
   height: 100%;
}

तब मेरे पास एक बाहरी कंटेनर वर्ग था:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

और अंत में कक्षा के साथ आंतरिक कंटेनर:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML जितना सरल है:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

यह आपको सभी सामग्रियों को लंबवत संरेखित करने की आवश्यकता है। इसे बेला में देखें:

Jsfiddle

Answer 13

टेबल और टेबल-सेल की कोई आवश्यकता नहीं है। यह आसानी से परिवर्तन का उपयोग करके प्राप्त किया जा सकता है।

उदाहरण: http://codepen.io/arvind/pen/QNbwyM

कोड:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Answer 14

यदि आप बूटस्ट्रैप के कम संस्करण का उपयोग कर रहे हैं , और स्वयं CSS में संकलित कर रहे हैं, तो आप बूटस्ट्रैप कक्षाओं के साथ उपयोग करने के लिए कुछ उपयोगिता वर्गों का उपयोग कर सकते हैं।

मैंने इन्हें काल्पनिक रूप से अच्छी तरह से काम करने के लिए पाया है जहां मैं बूटस्ट्रैप ग्रिड सिस्टम की जवाबदेही और विन्यास को संरक्षित करना चाहता हूं (जैसे कि उपयोग करना -mdया -sm), लेकिन मैं चाहता हूं कि किसी दिए गए पंक्ति में सभी कॉलम एक ही ऊर्ध्वाधर ऊंचाई (ताकि मैं कर सकूं फिर अपनी सामग्री को लंबवत रूप से संरेखित करें और पंक्ति में सभी कॉलम एक सामान्य मध्य साझा करें)।

सीएसएस / कम:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

Answer 15

मैंने zessx के उत्तर पर थोड़ा विस्तार किया , ताकि विभिन्न स्क्रीन आकारों पर विभिन्न स्तंभ आकारों को मिलाते समय उपयोग करना आसान हो सके।

यदि आप Sass का उपयोग करते हैं , तो आप इसे अपने scss- फाइल में जोड़ सकते हैं:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

जो निम्नलिखित सीएसएस उत्पन्न करता है (कि आप सीधे अपने स्टाइलशीट में उपयोग कर सकते हैं, यदि आप सैस का उपयोग नहीं कर रहे हैं)

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

अब आप इसे अपने उत्तरदायी कॉलम पर इस तरह से उपयोग कर सकते हैं:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Comments

यह वास्तव में अच्छा है!

— पीट्रो कोल्हो

कम सिंटैक्स और लेस वैरिएबल के उपयोग के कारण अपवोट किया गया।

— एडुआर्ड लुका

Answer 16

फ्लेक्स व्यवहार मूल रूप से बूटस्ट्रैप 4 के बाद से समर्थित हैं । डिव d-flex align-items-centerमें जोड़ें row। अब आपको अपनी CSS सामग्री को संशोधित करने की आवश्यकता नहीं है।

सरल उदाहरण: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

अपने उदाहरण के साथ: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

स्रोत: फ्लेक्स · बूटस्ट्रैप

Answer 17

ठीक है, गलती से मैंने कुछ समाधान मिलाया है, और यह आखिरकार अब मेरे लेआउट के लिए काम करता है जहां मैंने सबसे छोटे रिज़ॉल्यूशन पर बूटस्ट्रैप कॉलम के साथ एक 3x3 टेबल बनाने की कोशिश की।

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

Answer 18

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }

    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>

Answer 19

इसे इस्तेमाल करे,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

Answer 20

आप इसे कर सकते हैं कई तरीके हैं:

1. उपयोग 

   display: table-cell;
   vertical-align: middle;

   और कंटेनर का सीएसएस

   display: table;

2. स्क्रीन आकार के सापेक्ष पैडिंग को बदलने के लिए मीडिया-स्क्रीन के साथ पैडिंग का उपयोग करें। Google @मीडिया स्क्रीन अधिक जानने के लिए।

3. रिश्तेदार गद्दी का उपयोग करें

   यानी,% के संदर्भ में पैडिंग निर्दिष्ट करें

Answer 21

बूटस्ट्रैप 4 (जो वर्तमान में अल्फा में है) के साथ आप .align-items-centerवर्ग का उपयोग कर सकते हैं । तो आप बूटस्ट्रैप के उत्तरदायी चरित्र को रख सकते हैं। मेरे लिए सीधे ठीक काम करता है। बूटस्ट्रैप 4 प्रलेखन देखें ।

Comments

यह केवल कुछ वस्तुओं के लिए काम करता है जब युक्त तत्व प्रदर्शित होता है: फ्लेक्स।

— ज़िम

Answer 22

एचटीएमएल

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

सीएसएस

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Answer 23

मैं उसी स्थिति में भाग गया, जहाँ मैं कुछ दिव्य तत्वों को एक पंक्ति में लंबवत रूप से संरेखित करना चाहता था और पाया कि बूटस्ट्रैप क्लासेस col-xx-xx div को शैली को फ्लोट के रूप में लागू करता है: छोड़ दिया।

मुझे स्टाइल तत्वों जैसे स्टाइल = "फ्लोट: कोई नहीं" पर स्टाइल लागू करना था और मेरे सभी डिव तत्वों को लंबवत रूप से संरेखित करना शुरू कर दिया। यहाँ काम कर रहा उदाहरण है:

<div class="col-lg-4" style="float:none;">

JsFiddle लिंक

बस अगर कोई व्यक्ति फ्लोट संपत्ति के बारे में अधिक पढ़ना चाहता है:

W3Schools - फ्लोट

Comments

यह मेरे लिए काम नहीं कर रहा है। मैंने फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया। सभी पैनल लंबवत रूप से स्टैक्ड हैं।

— अल्फा

फ्लोट: कोई भी उन्हें खड़ी खड़ी नहीं करेगा, यह है कि यह कैसे काम करना चाहिए।

— ATHER

फिर यह एक अलग प्रश्न के लिए सही उत्तर है। ;)

— अल्फ