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

285

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

css twitter-bootstrap

— यह मैं हूँ
स्रोत

2

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

— markvandencorput

2

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

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

4

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

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

246

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

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

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

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

— यह मैं हूँ
स्रोत

22

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

— हेनिंग

3

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

— trejder

7

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

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

1

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

— itme

1

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

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

76

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

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

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

— m0000g
स्रोत

55

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

यदि आप किसी चित्र को 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 अब इसे मूल रूप से उपयोग करता है ।

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

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

— cssyphus
स्रोत

32

अपडेटेड 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 देखें

— Zim
स्रोत

30

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

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

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

स्निपेट का विस्तार करें

— kirgiz_jigit
स्रोत

9

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

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

— atabak
स्रोत

1

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

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

7

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

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

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

— PersianMan
स्रोत

4

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

— trejder

2

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

— राउल

2

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

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

5

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

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

तथा

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

— Xander-मिलर
स्रोत

5

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

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

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

— alvseek
स्रोत

3

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

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

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

स्निपेट का विस्तार करें

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

— taoufiqaitali
स्रोत

0

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

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

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

— ऑनलाइन थॉमस
स्रोत

0

के लिए 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>

— रामिल गिलफानोव
स्रोत