html - ट्विटर बूटस्ट्रैप का उपयोग करके आप केंद्रित सामग्री कैसे प्राप्त करते हैं?




css twitter-bootstrap (15)

यह टेक्स्ट सेंटरिंग के लिए है ( जो सवाल था )

अन्य प्रकार की सामग्री के लिए, फ्लैवियन के उत्तर देखें।

अद्यतन: बूटस्ट्रैप 2.3.0+ उत्तर

मूल उत्तर बूटस्ट्रैप के प्रारंभिक संस्करण के लिए था। बूटस्ट्रैप 2.3.0 के रूप में, आप बस कक्षा को कक्षा .text-center दे सकते .text-center

मूल उत्तर (पूर्व 2.3.0)

आपको text-align: center span12 साथ दो वर्गों, row या span12 से एक को परिभाषित करने की आवश्यकता है text-align: centerhttp://jsfiddle.net/xKSUH/ या http://jsfiddle.net/xKSUH/1/ देखें

मैं एक बहुत ही बुनियादी उदाहरण का पालन करने की कोशिश कर रहा हूं। स्टार्टर पेज और ग्रिड सिस्टम का उपयोग करके, मैं निम्नलिखित की उम्मीद कर रहा था:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... केंद्रित पाठ का उत्पादन करेगा।

हालांकि, यह अभी भी बाईं ओर दिखाई देता है। मैं क्या गलत कर रहा हूं?


2018 अपडेट करें - बूटस्ट्रैप 4

"केंद्रित सामग्री" का अर्थ कई अलग-अलग चीजें हो सकता है, और मूल पोस्ट के बाद बूटस्ट्रैप केंद्रिंग बहुत बदल गई है।

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

बूटस्ट्रैप 3

  • text-center का उपयोग display:inline लिए किया जाता है display:inline तत्व
  • center-block सेंटर display:block तत्व
  • col-*offset-* केंद्र ग्रिड कॉलम के लिए
  • इस जवाब को navbar केंद्र के लिए देखें

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

बूटस्ट्रैप 4

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

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

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

लंबवत केंद्र

अब बूटस्ट्रैप 4 डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स है, वर्टिकल संरेखण के लिए कई अलग-अलग दृष्टिकोण हैं: auto-margins , फ्लेक्सबॉक्स यूटिल , या डिस्प्ले यूटिल्स वर्टिकल एलाइन यूटिल्स के साथ। पहले "ऊर्ध्वाधर संरेखण utils" स्पष्ट प्रतीत होता है लेकिन इनलाइन और तालिका प्रदर्शन तत्वों के साथ इन केवल काम करते हैं। यहां कुछ बूटस्ट्रैप 4 लंबवत केंद्र विकल्प हैं ..

1 - ऑटो मार्जिन का उपयोग कर वर्टिकल सेंटर:

लंबवत केंद्र का एक और तरीका है my-auto का उपयोग करना। यह तत्व के कंटेनर के भीतर तत्व को केंद्रित करेगा। उदाहरण के लिए, h-100 पंक्ति को पूर्ण ऊंचाई बनाता है, और my-auto लंबवत रूप से col-sm-12 कॉलम को 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 ऊर्ध्वाधर वाई-अक्ष पर मार्जिन का प्रतिनिधित्व करता है और इसके बराबर है:

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 उपयोग 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>

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

3 - प्रदर्शन उपयोग का उपयोग कर लंबवत केंद्र:

बूटस्ट्रैप 4 में डिस्प्ले के लिए इस्तेमाल किया जा सकता है जो display:table लिए इस्तेमाल किया जा सकता है display:table , display:table-cell , display:inline , इत्यादि। इनलाइनों को इनलाइन, इनलाइन-ब्लॉक या टेबल सेल तत्वों को संरेखित करने के लिए लंबवत संरेखण उपयोग के साथ उपयोग किया जा सकता है।

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

प्रदर्शन का उपयोग कर वर्टिकल सेंटर डेमो का उपयोग करता है


आपको .span साथ समायोजित करने की .span

उदाहरण:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

उत्तरदायित्व बनाए रखने के दौरान जानकारी के ब्लॉक को केंद्रित करने के लिए मेरी पसंदीदा विधि (मोबाइल संगतता) उस सामग्री के पहले और बाद में दो खाली span1 divs span1 जिसे आप केंद्र में रखना चाहते हैं।

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

ऐसा करने का सबसे अच्छा तरीका एक सीएसएस शैली को परिभाषित करना है:

.centered-text {
    text-align:center
}    

फिर जहां आपको कभी भी केंद्रित पाठ की आवश्यकता होती है, आप इसे इस तरह जोड़ते हैं:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

या यदि आप सिर्फ पी टैग केंद्रित चाहते हैं:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

कम इनलाइन सीएसएस आप बेहतर उपयोग करते हैं।


केंद्र-ब्लॉक भी एक विकल्प है जो ऊपर दिए गए उत्तरों में निर्दिष्ट नहीं है

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

सभी वर्ग center-block तत्व को 0 ऑटो का मार्जिन देने के लिए कहता है, ऑटो बाएं / दाएं मार्जिन होते हैं। हालांकि, जब तक कि कक्षा टेक्स्ट-सेंटर या सीएसएस टेक्स्ट-संरेखण न हो: केंद्र; माता-पिता पर सेट है, तत्व इस ऑटो गणना से काम करने के लिए बिंदु नहीं जानता है, इसलिए यह स्वयं को अनुमानित रूप से केंद्रित नहीं करेगा।

तो पाठ केंद्र एक बेहतर विकल्प है।


जो आप चाहते हैं div या टैग के लिए बस एक वर्ग, टेक्स्ट-सेंटर का उपयोग करें। मुझे लगता है कि यह ठीक काम कर सकता है। यह पाठ संरेखण केंद्र के लिए बूटस्ट्रैप वर्ग है।

यहां कुछ टेक्स्ट संरेखण बूटस्ट्रैप कक्षाएं दी गई हैं:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

नोट: इसे बूटस्ट्रैप 3 में हटा दिया गया था।

प्री-बूटस्ट्रैप 3, आप इस तरह के सीएसएस क्लास pagination-centered उपयोग कर सकते हैं:

<div class="span12 pagination-centered">
    Centered content.
</div>

क्लास pagination-centered पहले से ही bootstrap.css (या bootstrap.min.css) में है और इसमें केवल एक नियम है:

.pagination-centered{text-align:center;}

बूटस्ट्रैप 2.3.0 के साथ बस कक्षा text-center उपयोग करें


बूटस्ट्रैप 2.3 में text-center क्लास है।

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

बूटस्ट्रैप संस्करण 3.1.1 और उसके बाद, सामग्री को केंद्रित करने के लिए सबसे अच्छी कक्षा .center-block सहायक वर्ग है।


मेरी ओर से मैं उपयोग करने के लिए तैयार और आसान याद रखने के लिए तैयार नई CSS शैलियों परिभाषित:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

क्या यह एक अच्छा विचार है? क्या इसके लिए कोई अच्छा अभ्यास है?


मैंने दो तरीकों की कोशिश की, और यह div को केन्द्रित करने के लिए ठीक काम किया। दोनों तरीकों से सभी स्क्रीन पर divs संरेखित करेंगे।

रास्ता 1: पुश का उपयोग करना:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

रास्ता 2: ऑफ़सेट का उपयोग करना:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

परिणाम:

व्याख्या

बूटस्ट्रैप बाएं, निर्दिष्ट स्क्रीन-अधिभोग के पहले कॉलम को नामित करेगा। अगर हम ऑफसेट या पुश का उपयोग करते हैं तो यह 'इन' कॉलम को 'उन' कॉलम से बदल देगा। हालांकि मुझे ऑफसेट की प्रतिक्रिया में कुछ मुद्दों का सामना करना पड़ा, फिर भी धक्का अद्भुत था।


यदि आप बूटस्ट्रैप 3 का उपयोग करते हैं, तो इसमें .text-center नामक अंतर्निहित सीएसएस क्लास भी है। ये वही है जो आप चाहते हो।

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

कृपया jsfiddle में उदाहरण देखें। http://jsfiddle.net/ucheng/Q4Fue/


वर्ग। शो-ग्रिड लिंक में उदाहरण में केंद्र गठबंधन पाठ लागू कर रहा है।

आप हमेशा अपनी पंक्ति div या कुछ अन्य वर्ग में style="text-align:center" जोड़ सकते हैं जो मुझे लगता है।


<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

मुख्य में कंटेनर-तरल पदार्थ का प्रयोग न करें।





twitter-bootstrap