बूटस्ट्रैप सेंटर हेडिंग

93

यह मेरा पहला ट्विटर बूटस्ट्रैप अनुभव है। मैंने कुछ शीर्षक (h1, h2, आदि) जोड़े हैं और वे बाईं ओर संरेखित हैं। शीर्षकों को केंद्रित करने का सही तरीका क्या है?

twitter-bootstrap

— SiberianGuy
स्रोत

आप शीर्षकों को कैसे शामिल कर रहे हैं? कंटेनर के अंदर, एक pटैग की तरह , या ढीला?

— एंड्रेस इलिच

@AndresIlich, रो-फ्लुइड के अंदर (जो कंटेनर-फ्लुइड के अंदर है)

— साइबेरियाई

क्या आप सभी शीर्षकों को केंद्रित करना चाहते हैं? या कुछ चुनिंदा?

— एंड्रेस इलिच

@AndresIlich, मैं सभी शीर्षकों को डिफ़ॉल्ट रूप से केन्द्रित करना चाहता हूं

— साइबेरियाई

140

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

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

बूटस्ट्रैप ने पाठ संरेखण के लिए तीन सीएसएस कक्षाएं जोड़ी हैं।

— जिनपू हू
स्रोत

68

केंद्र शीर्षक के लिए तत्व में सिर्फ कक्षा = 'पाठ-केंद्र' का उपयोग करें।

<h2 class="text-center">sample center heading</h2>

कक्षा में 'हेडिंग-लेफ्ट' को लेफ्ट हेडिंग के लिए प्रयोग करें और क्लास में 'टेक्स्ट-राइट' को राइट हेडिंग के लिए उपयोग करें।

— सादेग-खान
स्रोत

29

पंक्ति की विशेषता में बस "औचित्य-सामग्री-केंद्र" का उपयोग करें।

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Jufrench
स्रोत

2

यह सारी जटिलता क्यों? क्या <h1 class="text-center">सादगी -खान के उत्तर के अनुसार यह अधिक सरल नहीं है ?

— मार्को सुल

इसका उपयोग करने से हेडर को बूटस्ट्रैप का उपयोग करते समय div में केंद्रीकृत होने की अनुमति मिलती है जो पाठ-केंद्र का उपयोग नहीं करता है। यह हेडर को स्क्रीन के बीच में प्रदर्शित करता है जो कि मैं इसके लिए लक्ष्य कर रहा था।

— a.norman

11

अपनी टिप्पणियों के अनुसार, आपको सभी शीर्षकों text-align:centerको एक ही समय में उन सभी को जोड़ना होगा, जैसे कि:

सीएसएस

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— एंड्रेस इलिच
स्रोत

1

जबकि सच है, ट्विटर बूटस्ट्रैप का उपयोग करने के पीछे का विचार मौजूदा वर्गों का यथासंभव उपयोग करना है। जिनपू हू

— स्कर्पी

@Skurpi चौखटे एक परियोजना में आप क्या उपयोग कर सकते हैं इसके सुझाव के रूप में कार्य करते हैं; वे किसी भी तरह से दिए गए हैं। जबकि बूटस्ट्रैप में पहले से दिए गए वर्गों और शैलियों का उपयोग करना सरल है, अगर आपकी परियोजना की आवश्यकताओं को "ओपी के प्रश्न के अनुसार, फ्रेमवर्क में कुछ कठोर बदलाव करने की आवश्यकता है", इसके बारे में जाने के लिए सबसे सरल तरीके से सिर्फ उन परिवर्तनों को संशोधित करना है। जड़ स्तर। के रूप में आप वास्तव में जरूरत नहीं है कि वर्गों के एक टन जोड़ने का विरोध किया।

— एंड्रेस इलिच

@Skurpi इसके अलावा, उन संरेखण वर्गों में लेखन के समय मौजूद नहीं था । यह उत्तर एक वर्ष पुराना है।

— एंड्रेस इलिच

इलिच आप सही कह रहे हैं, इस सवाल की तारीख को नहीं देखा जब मैं यहाँ आया था

— स्कर्पी

5

बूटस्ट्रैप कई पूर्व-निर्मित कक्षाओं के साथ आता है और उनमें से एक है class="text-left"। जब भी जरूरत हो इस क्लास को कॉल करें। :-)

— Tinsae
स्रोत