बूटस्ट्रैप 4 में ऊर्ध्वाधर संरेखित केंद्र

Question

मैं अपने कंटेनर को बूटस्ट्रैप 4. के उपयोग से पृष्ठ के मध्य में केंद्रित करने का प्रयास कर रहा हूं। मैं इस प्रकार अब तक असफल रहा हूं। किसी भी सहायता की सराहना की जाएगी।

मैंने इसे Codepen.io पर बनाया है ताकि आप लोग इसके साथ खेल सकें और मुझे बता सकें कि विचारों के बारे में मैं क्या काम करता हूं ...

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

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

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

अब, बूटस्ट्रैप 4 में वर्टिकल सेंटरिंग पर ...

पूर्ण-ऊँचाई बनाने के लिए आप नए फ्लेक्सबॉक्स और आकार की उपयोगिताओं का उपयोग कर सकते हैं । इन विकल्पों के लिए अतिरिक्त CSS की आवश्यकता नहीं होती है (सिवाय इसके कि कंटेनर की ऊंचाई (जैसे: html, निकाय) 100% होनी चाहिए )।containerdisplay: flex

align-self-centerफ्लेक्सबॉक्स बच्चे पर विकल्प 1

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

align-items-centerFlexbox माता-पिता पर विकल्प 2 ( .rowहै display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

justify-content-centerFlexbox माता-पिता पर विकल्प 3 ( .cardहै display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

---

बूटस्ट्रैप 4 वर्टिकल सेंटरिंग पर अधिक

अब जब बूटस्ट्रैप 4 फ्लेक्सबॉक्स और अन्य उपयोगिताओं की पेशकश करता है , तो ऊर्ध्वाधर संरेखण के कई दृष्टिकोण हैं। http://www.codeply.com/go/WG15ZWC4lf

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>

कार्यक्षेत्र केंद्र ऑटो मार्जिन का उपयोग डेमो

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>

कार्यक्षेत्र केंद्र विभिन्न ऊंचाई कॉलम डेमो

इस Q / A को केंद्र में देखें, लेकिन समान ऊंचाई बनाए रखें

---

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>

प्रदर्शन बर्तन डेमो का उपयोग कर कार्यक्षेत्र केंद्र

अधिक उदाहरण
वर्टिकल सेंटर में <div>
वर्टिकल सेंटर इमेज .row in .container
वर्टिकल सेंटर और बॉटम <div>
वर्टिकल सेंटर चाइल्ड इन पेरेंट
वर्टिकल सेंटर फुल स्क्रीन जंबोट्रॉन

---

जरूरी! क्या मैंने ऊंचाई का उल्लेख किया है?

याद रखें कि ऊर्ध्वाधर केंद्रक मूल तत्व की ऊंचाई के सापेक्ष है । यदि आप अधिकांश मामलों में पूरे पृष्ठ पर केंद्र बनाना चाहते हैं, तो यह आपका सीएसएस होना चाहिए ...

body,html {
  height: 100%;
}

या उपयोग min-height: 100vh( min-vh-100बूटस्ट्रैप में 4.1+) माता-पिता / कंटेनर पर। यदि आप माता-पिता के अंदर एक बाल तत्व को केंद्रित करना चाहते हैं। माता-पिता के पास एक परिभाषित ऊंचाई होनी चाहिए ।

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

Comments

एक नेवबार के साथ एक पृष्ठ पर ऊपर का उपयोग करते समय मुझे एक स्क्रॉलबार मिल रहा है। मुझे लगता है कि यह नावबार के नीचे 100% ऊंचाई जोड़ रहा है और इसके पार केंद्रित है। मैं कैसे इसे ठीक कर सकता हूं?

— न्यूडिमेंशन

मैं फ्लेक्स बॉक्स के साथ कई पंक्तियों को केंद्र में संरेखित करने की कोशिश कर रहा हूं। मैं केंद्र के सभी बटन संरेखित करना चाहता हूं। codeply.com/go/5abdqC33cU

— कोडर

: मैं एक वर्तमान में यहाँ दिखाया गया है तरीकों के आधार पर एकत्रित की 3 तरीके दिखा codepen तैयार codepen.io/yigith/pen/oNjmGEL

— KodFun

Answer 2

आप मूल कंटेनर को फ्लेक्स बनाकर और जोड़कर अपने कंटेनर को लंबवत संरेखित कर सकते हैं align-items:center:

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

अपडेटेड पेन

Comments

ओह्ह लोल, मैंने वर्णन में लिंक को याद किया ... आपने भी जोड़ा html, body {height:100%}... इससे काम बन गया! धन्यवाद!

— कनान सीटटन

आपके उत्तर में समस्या को हल करने के तरीके से नहीं पूछा गया (बूटस्ट्रैप का उपयोग करते हुए)

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

im टोटली आपसे सहमत नहीं है, आप सवाल के बावजूद वर्कअराउंड का प्रस्ताव करते हैं कि यह बूटस्ट्रैप कक्षाओं के साथ कैसे किया जाता है।

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

@AlexNikonov नहीं जहां ओपी प्रश्न में यह कहा गया है कि वे केवल बूटस्ट्रैप का उपयोग करने तक सीमित हैं - यह उन अन्य लोगों के लिए एक विकल्प है जो बूटस्ट्रैप कक्षाओं के उपयोग के बिना चीजों को लंबवत संरेखित करने के लिए इस पृष्ठ पर उतर सकते हैं। बस साथ चलते हैं - आप उपयोग करने के लिए यहां बहुत सारे अन्य उत्तर हैं। मैं यह नहीं देखता कि आप इस बारे में क्यों लटके हुए हैं - यह उन सभी विचारों के लिए एक मंच है जो मदद करेंगे - न कि केवल एक दिमाग वाले उत्तर। यह आप जैसे उपयोगकर्ताओं को इस साइट को खराब करने वाले उत्तरों को खराब कर रहा है जो समस्या का समाधान प्रस्तुत करते हैं लेकिन सिर्फ इसलिए कि आप इसे पसंद नहीं करते हैं

— पेटी

@AlexNikonov यह भी पढ़ें कि अगर आपने मूल अनएडिटेड पोस्ट (जब मैंने अपना उत्तर जोड़ा), तो आप यह भी देखेंगे कि ओपी बूटस्ट्रैप कक्षाओं का उपयोग किए बिना केंद्र के लिए प्रयास कर रहा था, इसलिए उत्तर देने के समय यह सही था

— पीट

Answer 3

बूटस्ट्रैप के बाद 4 वर्गों ने मुझे इसे हल करने में मदद की

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Comments

हालांकि यह मेरे div लंबवत केंद्रित नहीं था।

— सुबह

क्या आप कृपया अपने css कोड पर विस्तार से बता सकते हैं। इसका एक स्निपेट साझा करें, मैं उस मुद्दे पर ध्यान दूंगा जो आप सामना कर रहे हैं।

— मनोज

Answer 4

क्योंकि उपरोक्त किसी ने मेरे लिए काम नहीं किया, मैं एक और उत्तर जोड़ रहा हूं।

लक्ष्य: लंबवत और क्षैतिज रूप से बूटस्ट्रैप 4 फ्लेक्सबॉक्स कक्षाओं का उपयोग करके पृष्ठ पर एक div संरेखित करें।

चरण 1: अपनी सबसे बाहरी div को ऊंचाई पर सेट करें 100vh। यह वेवीपोर्ट ऊँचाई के 100% की ऊंचाई निर्धारित करता है। यदि आप ऐसा नहीं करते हैं, तो कुछ और काम नहीं करेगा। इसे ऊंचाई पर सेट करना 100%केवल माता-पिता के सापेक्ष है, इसलिए यदि माता-पिता व्यूपोर्ट की पूर्ण ऊंचाई नहीं है, तो कुछ भी काम नहीं करेगा। नीचे दिए गए उदाहरण में, मैंने बॉडी को 100vh पर सेट किया है।

चरण 2: कंटेनर डिव को d-flexक्लास के साथ फ्लेक्सबॉक्स कंटेनर होने के लिए सेट करें ।

चरण 3: केंद्र को justify-content-centerकक्षा के साथ क्षैतिज रूप से विभाजित करें।

चरण 4: केंद्र div लंबवत रूप से align-items-center

चरण 5: रन पेज, अपने लंबवत और क्षैतिज रूप से केंद्रित div को देखें।

ध्यान दें कि कोई विशेष वर्ग नहीं है जिसे स्वयं केंद्रीकृत div (बाल div) पर सेट करने की आवश्यकता है

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

Comments

@ अजयकुमार, क्या आप अपने संशोधनों को साझा करना चाहेंगे?

— ग्रेग गम

धन्यवाद, विशेषकर 100vhचाल ने मुझे बहुत मदद की। बूटस्ट्रैप भी इसके लिए vh-100कक्षा प्रदान करता है ।

— svens

Answer 5

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

Answer 6

मैंने यहाँ सभी उत्तरों की कोशिश की है, लेकिन यहाँ पाया गया कि h-100 और vh-100 के बीच अंतर है यहाँ मेरा समाधान है:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

Answer 7

बूटस्ट्रैप 4 (बीटा) में, उपयोग करें align-middle। कार्यक्षेत्र संरेखण पर बूटस्ट्रैप 4 प्रलेखन का संदर्भ लें :

ऊर्ध्वाधर-संरेखण उपयोगिताओं के साथ तत्वों के संरेखण को बदलें । कृपया ध्यान दें कि लंबवत-संरेखण केवल इनलाइन , इनलाइन-ब्लॉक , इनलाइन-टेबल और टेबल सेल तत्वों को प्रभावित करता है ।

चुनें से .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, और .align-text-topके रूप में की जरूरत है।

Answer 8

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

Comments

आपके चित्रों ने मुझे

— थिक

Answer 9

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

यह रेखा वह जगह है जहां जादू होता है <div class="col-md-6 my-auto">, my-autoइच्छा स्तंभ की सामग्री को केंद्र में रखता है। यह ऊपर दिए गए कोड नमूने जैसी स्थितियों के साथ बहुत बढ़िया काम करता है, जहाँ आपके पास एक चर आकार की छवि हो सकती है और कॉलम में पाठ को इसके साथ दाईं ओर पंक्ति में रखने की आवश्यकता होती है।

Answer 10

मैंने इसे बूटस्ट्रैप के साथ इस तरह किया 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

Answer 11

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Comments

@ अजयकुमार flex-grow-1क्लास को कार्ड में जोड़ना सिकुड़ने से रोकता है।

— फ्रेड

Answer 12

वर्टिकल एलाइन इस बूटस्ट्रैप 4 वर्गों का उपयोग करते हुए:

जनक: डी-टेबल

तथा

बच्चा: डी-टेबल-सेल और संरेखित-मध्य और पाठ-केंद्र

उदाहरण के लिए:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

और यदि आप चाहते हैं कि माता-पिता मंडली हों:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

दो कस्टम सीएसएस कक्षाएं निम्नानुसार हैं:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

अंतिम उपयोग उदाहरण के लिए हो सकता है:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Answer 13

अपनी सामग्री को एक फ्लेक्सबॉक्स कंटेनर के भीतर रखें जो 100% ऊंचा हो यानी h-100। फिर औचित्य -सामग्री-केंद्र वर्ग का उपयोग करके सामग्री को केंद्र में रखें ।

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

Answer 14

.my-autoyor div पर (bootrap44) css क्लास का उपयोग करें

Answer 15

बूटस्ट्रैप में 4.1.3:

यह मेरे लिए तब काम आया जब मैं container > row > columnएक h1शीर्षक के बगल में बूटस्ट्रैप बैज को केंद्र में रखने की कोशिश कर रहा था ।

क्या काम किया कुछ सरल सीएसएस था:

.my-valign-center {
  vertical-align: 50%;
}

या

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>