ट्विटर बूटस्ट्रैप - तत्वों को क्षैतिज या लंबवत रूप से कैसे केंद्रित करें

Question

मुख्य माता-पिता के अंदर खड़ी या क्षैतिज रूप से html तत्वों को केंद्र में रखने का कोई तरीका है?

Comments

यह क्षैतिज और लंबवत केंद्र के बारे में एक महान पोस्ट है: यहाँ देखें

— markvandencorput

मैं भी क्षैतिज संरेखण के लिए एक समस्या का सामना कर रहा था; मैंने बस <center></center>टैग का उपयोग किया

— उत्पल - उर बेस्ट पाल

@ उत्पल-उरस्टेस्टल का <center>टैग लगभग 12 साल पहले हटा दिया गया था।

— नील्स केयूरेंटजेस

Answer 1

अपडेट : जबकि यह उत्तर 2013 की शुरुआत में सही होने की संभावना थी, अब इसका उपयोग नहीं किया जाना चाहिए। उचित समाधान ऑफसेट का उपयोग करता है ।

---

अन्य उपयोगकर्ताओं के सुझाव के अनुसार मूल बूटस्ट्रैप कक्षाएं भी उपलब्ध हैं जैसे:

class="text-center"
class="pagination-centered"

@Henning और @trejder को धन्यवाद

Comments

ठीक वही स्टाइल पहले से ही बूटस्ट्रैप में निहित है; बस उपयोगclass="text-center"

— हेनिंग

या .pagination-centeredएक विकल्प के रूप में।

— trejder

इसका उत्तर होना चाहिए, अन्य लोग 'बूटस्ट्रैप' के प्रश्न के पूरे हिस्से की उपेक्षा करते हैं।

— रयान मैकडोनो

@RyanMcDonough हाँ, प्रभावी रूप से यह अन्य सभी लोगों को सुझाव दे रहा है इसलिए मैंने जवाब के रूप में जाँच की ठीक है?

— itme

text-centerलेआउट के लिए उपयोग करना बहुत बुरा अभ्यास है। बूटस्ट्रैप में कॉलम संरेखित करने का उचित तरीका col-XX-offset-Yकक्षाओं का उपयोग करके है । getbootstrap.com/css/#grid-offsetting । यह उत्तर 2013 में सही था, लेकिन आज इसका उपयोग नहीं किया जाना चाहिए।

— नील्स केयूरेंटजेस

Answer 2

से बूटस्ट्रैप प्रलेखन :

के display: blockमाध्यम से और केंद्र के लिए एक तत्व सेट करें margin। एक मिश्रण और कक्षा के रूप में उपलब्ध है।

<div class="center-block">...</div>

Answer 3

इस सवाल के लिए भविष्य के आगंतुकों के लिए:

यदि आप किसी चित्र को div में केन्द्रित करने का प्रयास कर रहे हैं, लेकिन चित्र केंद्र में नहीं होगा, तो यह आपकी समस्या का वर्णन कर सकता है:

समस्या का jsField DEMO

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveवर्ग एक कहते हैं display:blockछवि टैग, जो बंद हो जाता है के लिए अनुदेश text-align:center( text-centerकाम करने से वर्ग)।

उपाय:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

center-blockकक्षा को जोड़ने से कक्षा display:blockका उपयोग करके लगाए गए निर्देश को ओवरराइड करता है img-responsive।

img-responsiveवर्ग के बिना , छवि केवल text-centerकक्षा जोड़कर केंद्र होगी

---

अपडेट करें:

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

यहां ब्रैड शिफ द्वारा एक उत्कृष्ट, तेजी से पुस्तक वीडियो ट्यूटोरियल है

यहाँ एक महान धोखा शीट है

Answer 4

अपडेटेड 2018

में बूटस्ट्रैप 4 , केंद्रित तरीकों को बदल दिया है ..

बीएस 4 में क्षैतिज केंद्र

• text-centerअभी भी display:inlineतत्वों के लिए उपयोग किया जाता है
• mx-autocenter-blockकेंद्र display:flexबच्चों की जगह
• offset-* या mx-auto ग्रिड कॉलम को केंद्र में रखने के लिए इस्तेमाल किया जा सकता है

mx-auto(ऑटो x- अक्ष मार्जिन) केंद्रित कर देगा display:blockया display:flexतत्व एक है कि परिभाषित चौड़ाई , ( %, vw, px, आदि ..)। फ्लेक्सबॉक्स का उपयोग ग्रिड कॉलम पर डिफ़ॉल्ट रूप से किया जाता है , इसलिए विभिन्न फ्लेक्सबॉक्स केंद्रित तरीके भी हैं।

डेमो बूटस्ट्रैप 4 क्षैतिज केंद्र

बीएस 4 में ऊर्ध्वाधर केंद्र के लिए देखें https://stackoverflow.com/a/41464397/171456 देखें

Answer 5

आप अपनी सीएसएस फ़ाइल में इस तरह सीधे लिख सकते हैं:

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

<div class = "content" >
  
   <p> some text </p>
  </div>

Answer 6

मैं इस का उपयोग करें

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

Comments

कुछ मामलों में काम नहीं करता है ( अनिवार्य रूप से एक ही उत्तर पर टिप्पणी देखें और केंद्रीकरण के लिए बूटस्ट्रैप-विशिष्ट कक्षाओं का उपयोग न करें ।

— डैन डैस्कलेस्क्यू

Answer 7

क्षैतिज केंद्रित के लिए आप कुछ इस तरह से हो सकते हैं:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

Comments

काम नहीं करता है (कम से कम वर्तमान कार्यान्वयन में नहीं), जब सीधे एक छवि में उपयोग किया जाता है <img src="img/logo.png" style="float:none; margin:0 auto" />:। आसपास के imgमाता पिता के साथ divऔर दे रही है .text-centerया .pagination-centeredमाता-पिता के लिए कक्षा एक आकर्षण की तरह काम करता है।

— trejder

एक तत्व को मार्जिन के साथ केंद्रित करने के लिए: 0 ऑटो, आपको उस तत्व में एक चौड़ाई जोड़ने की आवश्यकता है। उपर्युक्त उदाहरण में कोई चौड़ाई निर्दिष्ट नहीं है क्योंकि स्पैन 8 में boobstrap की चौड़ाई है, लेकिन आपकी छवि ऐसा नहीं है <img src = "img / logo.png" शैली = "फ्लोट: कोई नहीं; मार्जिन: 0 ऑटो; चौड़ाई: 300px; /> क्षैतिज रूप से उस छवि को जनक के अंदर केन्द्रित करेगा

— राउल

यह प्रश्न के "बूटस्ट्रैप" भाग की उपेक्षा करता है।

— डेन डैस्कलेस्कु

Answer 8

मैं एक समान प्रश्न से इस समाधान को पसंद करता हूं। https://stackoverflow.com/a/25036303/2364401text-center वास्तविक टेबल डेटा <td>और टेबल हेडर <th>तत्वों पर बूटस्ट्रैप क्लास का उपयोग करें । इसलिए

<td class="text-center">Cell data</td>

तथा

<th class="text-center">Header cell data</th>

Answer 9

बूटस्ट्रैप 4 के साथ आप फ्लेक्स का उपयोग कर सकते हैं

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

स्रोत: बूटस्ट्रैप 4.1

Answer 10

बूटस्ट्रैप 4 + फ्लेक्स इसे हल करते हैं

आप उपयोग कर सकते हैं

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

यह केन्द्रित क्षैतिज और ऊर्ध्वाधर होना चाहिए

Answer 11

मैंने बूटस्ट्रैप 4 में पाया कि आप यह कर सकते हैं:

केंद्र क्षैतिज वास्तव में text-centerवर्ग है

केंद्र वर्टिकल हालांकि बूटस्ट्रैप कक्षाओं का उपयोग करते हुए दोनों को जोड़ रहा है mb-auto mt-autoताकि मार्जिन-टॉप और मार्जिन बॉटम ऑटो पर सेट हो जाए।

Answer 12

के लिए bootstrap4 कुछ आइटम के ऊर्ध्वाधर केंद्र

डी-फ्लेक्स फ्लेक्स नियमों के लिए

आइटम पर ऊर्ध्वाधर दिशा के लिए फ्लेक्स-कॉलम

केंद्र के लिए औचित्य-सामग्री-केंद्र

शैली = 'ऊँचाई: 300px;' सेट पॉइंट्स के लिए होना चाहिए जहां केंद्र कैल्क हो या एच -100 वर्ग का उपयोग करें

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>