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

Question

मेरे पास एक पेज है जहां केवल फॉर्म मौजूद है और मैं चाहता हूं कि फॉर्म को स्क्रीन के केंद्र में रखा जाए।

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-centerसंरेखित प्रपत्र क्षैतिज, लेकिन मैं समझ नहीं है कि यह कैसे खड़ी संरेखित करने के लिए। मैंने उपयोग करने की कोशिश की है align-items-centerऔर align-self-center, लेकिन यह काम नहीं करता है।

मैं क्या खो रहा हूँ?

डेमो

Answer 1

अपडेट 2019 - बूटस्ट्रैप 4.3.1

नहीं है कोई जरूरत के लिए अतिरिक्त सीएसएस । बूटस्ट्रैप में जो पहले से ही शामिल है वह काम करेगा। सुनिश्चित करें कि फ़ॉर्म के कंटेनर पूरी ऊँचाई के हैं । बूटस्ट्रैप 4 में अब h-100100% ऊंचाई के लिए एक वर्ग है ...

कार्यक्षेत्र केंद्र:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

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

आइटम के साथ कंटेनर की ऊंचाई केंद्र के लिए 100% होनी चाहिए (या जो वांछित ऊंचाई केंद्रित आइटम के सापेक्ष है)

नोट: किसी भी तत्व पर height:100%( प्रतिशत ऊंचाई ) का उपयोग करते समय , तत्व कंटेनर की ऊंचाई में होता है । आधुनिक ब्राउज़रों में वांछित ऊंचाई पाने height:100vh;के %लिए vh इकाइयों का उपयोग किया जा सकता है ।

इसलिए, आप html, बॉडी {height: 100%} सेट कर सकते हैं, या min-vh-100इसके बजाय कंटेनर पर नई कक्षा का उपयोग कर सकते हैं h-100।

---

क्षैतिज केंद्र:

• text-centerकेंद्र display:inlineतत्वों और स्तंभ सामग्री के लिए
• mx-auto फ्लेक्स तत्वों के अंदर केंद्रित करने के लिए
• offset-*या केंद्र स्तंभों केmx-auto लिए इस्तेमाल किया जा सकता है ( ).col-
• justify-content-centerकरने के लिए केंद्र कॉलम ( col-*) के अंदरrow

---

बूटस्ट्रैप 4
बूटस्ट्रैप 4 पूर्ण स्क्रीन केंद्रित रूप में ऊर्ध्वाधर संरेखित केंद्र
बूटस्ट्रैप 4 केंद्र इनपुट समूह
बूटस्ट्रैप 4 क्षैतिज + ऊर्ध्वाधर केंद्र पूर्ण स्क्रीन

Comments

क्या <section>टैग का उपयोग करना ठीक है , या <div>व्यूपोर्ट में क्षैतिज और लंबवत रूप से सामग्री को केंद्रित करने के लिए एक स्टिक होना चाहिए ? मुझे एक मौजूदा साइट मिली है जो कि रंग और / या पृष्ठभूमि छवियों को बदलने वाले अनुभागों के साथ पृष्ठों को मिला है।

— एड्रियन

क्या पंक्ति का कोई सीधा बच्चा एक .col नहीं होना चाहिए?

— मिगुएल स्टीवंस

यह उत्तर थोड़ा टूट गया है। आप स्पष्ट रूप से "अतिरिक्त सीएसएस के लिए कोई आवश्यकता नहीं है" लेकिन यह गलत है। आपके कोड नमूने में यह दिखाया गया है कि आपको बूटस्ट्रैप के बाहर सीएसएस में शरीर और html को 100% होना चाहिए। अतिरिक्त सीएसएस के बिना आपका समाधान काम नहीं करता है।

— मेजर मेजर

नहीं, शरीर और HTML "बाहर" नहीं हैं .. बूटस्ट्रैप सीएसएस कक्षाएं उन्हें भी जोड़ा जा सकता है! codeply.com/go/5ifNMHKUEy @dawn .. क्या विशेष रूप से काम नहीं किया? आपकी टिप्पणी उपयोगी नहीं है।

— ज़ीम

कंटेनर को 100% की आवश्यकता नहीं थी, लेकिन h-100 justify-content-center align-items-centerकाम किया

— JMP

Answer 2

मेरे लिए यह काम:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

Comments

सीएसएस शैलियों को जोड़ना न भूलें:<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>

— pyOwner

Answer 3

फ्लेक्सबॉक्स आपकी मदद कर सकता है। यहाँ जानकारी

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Answer 4

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

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

Comments

इसके अलावा, बूटस्ट्रैप 4 के h-100लिए उपयोग वर्ग का उपयोग किया जा सकता हैheight:100%

— Zim

मैं अब @ZimSystem के समाधान का उपयोग करने की सलाह देता हूं क्योंकि इसमें कस्टम CSS की आवश्यकता नहीं है और केवल बूटस्ट्रैप द्वारा प्रदान की गई कक्षाओं का उपयोग करता है।

— ब्रैम वेनरो

@BramVanroy जैसा कि आपने बताया कि मैंने ZimSystem के समाधान का उपयोग किया है लेकिन यह मेरे लिए काम नहीं करता है। आपका समाधान 4.0.0 और 4.1.0 दोनों वर्जन पर काम कर रहा है

— Sahan Pasindu निर्मल

Answer 5

बूटस्ट्रैप में टेक्स्ट को केंद्र में रखने के लिए टेक्स्ट-सेंटर है। उदाहरण के लिए

<div class="container text-center">

आप निम्न बदलें

<div class="row justify-content-center align-items-center">

निम्नलिखित के लिए

<div class="row text-center">

Answer 6

मेरे लिए किसी ने काम नहीं किया। लेकिन उसकी एक ने किया।

चूंकि बूटस्ट्रैप 4 .row वर्ग अब प्रदर्शित होता है: फ्लेक्स आप किसी भी कॉलम पर नए संरेखित-स्व-केंद्र flexbox उपयोगिता का उपयोग कर सकते हैं।

<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>

मैंने इसके बारे में https://medium.com/wdstack/bootstrap-4-vertical-center-1211448442/ffff से सीखा

Answer 7

यह IE 11 में बूटस्ट्रैप 4.3 के साथ काम कर रहा है । जबकि अन्य उत्तर मेरे मामले में IE11 में काम नहीं कर रहे थे।

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

Answer 8

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Answer 9

CSS में इस कोड का उपयोग करें:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

Answer 10

मैं यहाँ समाप्त हुआ क्योंकि मैं बूटस्ट्रैप 4 ग्रिड सिस्टम और एक कोणीय * एनजीफ़ोर लूप के साथ एक मुद्दा रहा था। मैं इसे लागू करने के लिए एक उचित औचित्य-सामग्री-केंद्र वर्ग को लागू करके एनजीएफआर को लागू करता हूं:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

जो परिणाम देता है:

Answer 11

डॉक से (बूट्सट्रैप 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around