बूटस्ट्रैप उत्तरदायी पृष्ठ में div को कैसे केंद्रित किया जाए

Question

मुझे नीचे बताए गए लेआउट की तरह पृष्ठ के केंद्र में एक div स्थिति द्वारा बूटस्ट्रैप का उपयोग करके एक उत्तरदायी पृष्ठ बनाना होगा।

Comments

stackoverflow.com/questions/9554724/…

— केनी थॉम्पसन

मुझे पाठ के साथ एक डिव को केन्द्रित करने की आवश्यकता है (बूटस्ट्रैप का उपयोग करके उत्तरदायी डिज़ाइन) जो कि लेआउट के समान एक और पूरी चौड़ाई के कोल-एलजी -12 सेंटेड डिव के अंदर मौजूद होना चाहिए। यदि मैं फिडल में नमूना कोड प्राप्त कर सकता हूं तो यह उपयोगी होगा

— राम प्रिया

Answer 1

बूटस्ट्रैप 4 के लिए अद्यतन

फ्लेक्स-बॉक्स के साथ सरल ऊर्ध्वाधर ग्रिड संरेखण

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

बूटस्ट्रैप 3 के लिए समाधान

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

यह सभी स्क्रीन आकारों में केंद्रित एक क्षैतिज और लंबवत div का एक सरल उदाहरण है।

Comments

शायद class="col-xs-4 col-xs-offset-4"बोना ही काफी है।

— L105

मुझे सभी स्क्रीन आकारों में div col-lg-12 लंबवत केंद्र की स्थिति बनानी है

— राम प्रिया

मैंने पाया कि आप इस हल को जांचने के लिए jsfiddle.net/Palapas/52VtD/687 कंटेनर को 100% ऊंचाई पर रखें अन्यथा आपको निरपेक्ष स्थान का उपयोग करने की आवश्यकता है

— ppollono

Answer 2

सीएसएस:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

उदाहरण का बेड़ा

Comments

जब मैं मोबाइल में अपनी साइट खोलता हूं तो यह समाधान काम नहीं करता है।

— कोडिनप्रोग्रेस

नमस्ते, आप किस ब्राउज़र का उपयोग कर रहे थे? क्या आपने बूटस्ट्रैप की स्टाइलशीट और जावास्क्रिप्ट लोड किया था? यह फ़ायरफ़ॉक्स और क्रोम में काम कर रहा है। सभी स्क्रीन आकारों पर परीक्षण किया गया।

— स्वरसाल

मैंने अपने ब्राउज़र का आकार बदलने के साथ-साथ एक उत्तरदायी वेबसाइट चेकर का उपयोग करके इसका परीक्षण किया। मेरे लिये कार्य करता है।

— रॉकी केव

यह फिक्स बूटस्ट्रैप डिफॉल्ट स्टाइल को तोड़ रहा है

— ppollono

Answer 3

में बूटस्ट्रैप 4

बच्चों को क्षैतिज रूप से केंद्र में लाने के लिए , बूटस्ट्रैप -4 वर्ग का उपयोग करें

justify-content-center

चिल्ड को लंबवत केंद्र करने के लिए , बूटस्ट्रैप -4 वर्ग का उपयोग करें

 align-items-center

लेकिन याद रखें कि इन जैसे बूटस्ट्रैप -4 उपयोगिता वर्ग के साथ डी-फ्लेक्स वर्ग का उपयोग करना न भूलें

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

नोट: यदि यह कोड काम नहीं करता है तो बूटस्ट्रैप -4 उपयोगिताओं को जोड़ना सुनिश्चित करें

Answer 4

बूटस्ट्रैप 4 के लिए अद्यतन

अब जबकि बूटस्ट्रैप 4 फ्लेक्सबॉक्स है, ऊर्ध्वाधर संरेखण आसान है। एक पूर्ण ऊंचाई flexbox div को देखते हुए, बस हमें my-autoभी ऊपर और नीचे मार्जिन के लिए ...

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

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

---

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

Answer 5

आपको सीएसएस में कुछ भी बदलने की आवश्यकता नहीं है आप इसे सीधे कक्षा में लिख सकते हैं और आपको इसका परिणाम मिलेगा।

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Answer 6

प्रदर्शन तालिका के बिना और बूटस्ट्रैप के बिना, मैं ऐसा करूँगा

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

Answer 7

अच्छा जवाब ppollono। मैं बस के आसपास खेल रहा था और मुझे थोड़ा बेहतर समाधान मिला। CSS समान रहेगा, अर्थात:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

लेकिन HTML के लिए:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

यह पर्याप्त होगा।

Answer 8

सबसे अच्छा तरीका नहीं है, लेकिन फिर भी काम करेगा

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

Answer 9

मुझे लगता है कि बूटस्ट्रैप के साथ लेआउट को पूरा करने का सबसे सरल तरीका इस प्रकार है:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

मैंने केवल उन divs की परतों को जोड़ना था, जो मुझे div को केन्द्रित करने की अनुमति देते थे, लेकिन चूंकि मैं प्रतिशत का उपयोग नहीं कर रहा हूँ, इसलिए आपको div की अधिकतम-चौड़ाई को केंद्र बनाने की आवश्यकता होगी।

आप एक से अधिक कॉलम को केंद्रित करने के लिए इसी विधि का उपयोग कर सकते हैं, आपको बस अधिक div लेयर्स जोड़ने की आवश्यकता है:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

नोट: कि मैंने md, sm और xs के लिए कॉलम 12 के साथ एक div जोड़ा है, यदि आप ऐसा नहीं करते हैं तो यह पृष्ठभूमि रंग के साथ पहला div है (इस मामले में "ब्लूवॉयलेट") ढह जाएगा, आप बच्चे को div देख पाएंगे , लेकिन पृष्ठभूमि का रंग नहीं।

Answer 10

बूटस्ट्रैप के वास्तविक संस्करण के लिए 4.3.1 उपयोग करें

अंदाज

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

कोड

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

Answer 11

यह कोशिश करो, उदाहरण के लिए, मैंने एक निश्चित ऊंचाई का उपयोग किया। मुझे लगता है कि यह उत्तरदायी परिदृश्य को प्रभावित नहीं करता है।

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Answer 12

बूटस्ट्रैप 4 में, उपयोग करें:

<div class="d-flex justify-content-center">...</div>

आप जो चाहते हैं उसके आधार पर भी स्थिति बदल सकते हैं:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

यहाँ संदर्भ

Answer 13

यहां सरल सीएसएस नियम हैं जो केंद्र में किसी भी div को डालते हैं

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Comments

क्या आप अपने उत्तर का विस्तार कर सकते हैं? लिंक समय के साथ बासी हो जाते हैं।

— ओरिक

इसके अलावा, इसे प्राप्त करने के लिए "बूटस्ट्रैप तरीका" नहीं है।

— फ्यूरियसफॉल्डर

Answer 14

सरल समाधान नीचे की तरह दोनों पक्षों में एक खाली कॉलम जोड़ रहा होगा:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

Answer 15

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

सीएसएस :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}