एक div के अंदर सामग्री संरेखित करें

152

मैं HTML में एक कंटेनर के अंदर सामग्री संरेखित करने के लिए सीएसएस शैली पाठ-संरेखित करता हूं। यह ठीक काम करता है जबकि सामग्री पाठ या ब्राउज़र IE है। लेकिन अन्यथा यह काम नहीं करता है।

जैसा कि नाम से पता चलता है कि इसका उपयोग मूल रूप से पाठ संरेखित करने के लिए किया जाता है। संरेखित संपत्ति को लंबे समय से हटा दिया गया है।

क्या html में सामग्री संरेखित करने का कोई अन्य तरीका है?

html css text-align

— हेमांशु भोजक
स्रोत

कृपया हमें अधिक जानकारी दें? वह कोड जो अन्य ब्राउज़रों में काम नहीं कर रहा है, को पिछले।

— शोभन

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

— लेविक

216

पाठ-संरेखित पाठ और अन्य इनलाइन सामग्री को संरेखित करता है। यह ब्लॉक एलिमेंट बच्चों को संरेखित नहीं करता है।

ऐसा करने के लिए, आप उस तत्व को देना चाहते हैं जिसे आप चौड़ाई से जोड़ना चाहते हैं, 'ऑटो' बाएं और दाएं मार्जिन के साथ। यह मानकों का अनुपालन करने वाला तरीका है जो IE5.x को छोड़कर हर जगह काम करता है।

<div style="width: 50%; margin: 0 auto;">Hello</div>

IE6 में काम करने के लिए, आपको एक निश्चित DOCTYPE का उपयोग करके यह सुनिश्चित करना होगा कि मानक मोड चालू है।

यदि आपको वास्तव में IE5 / Quirks मोड का समर्थन करने की आवश्यकता है, जो इन दिनों आपको वास्तव में नहीं चाहिए, तो दो अलग-अलग दृष्टिकोणों को केंद्रित करना संभव है:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(जाहिर है, शैलियों को एक स्टाइलशीट के अंदर सबसे अच्छा रखा जाता है, लेकिन इनलाइन संस्करण निराशाजनक है।)

— bobince
स्रोत

2

यदि आप div चौड़ाई को नहीं जानते हैं, जो अक्सर होता है, तो यह समाधान सभी ब्राउज़रों में पूरी तरह से काम करता है: Matthewjamestaylor.com/blog/…

— Artem Russakovskii

मैंने <div style = "width: 100%; मार्जिन: 0 ऑटो;"> हैलो </ div>

— Aamol

9

आप इसे इस तरह भी कर सकते हैं:

एचटीएमएल

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

सीएसएस

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

जैसा कि आर्टेम रसाकोवस्की ने भी उल्लेख किया है, पूरा विवरण के लिए मैटव्यू जेम्स टेलर का मूल लेख पढ़ें ।

— महदी
स्रोत

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— कृ त k
स्रोत

1

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— andreas

क्षमा करें, उपरोक्त कोड मूल सामग्री के साथ एक div केंद्र संरेखित करेगा

— krithi k

6

ईमानदारी से, मैं अब तक देखे गए सभी समाधानों से घृणा करता हूं, और मैं आपको बताऊंगा कि क्यों: वे अभी कभी इसे सही संरेखित नहीं करते हैं ... इसलिए यहां मैं आमतौर पर क्या करता हूं:

मुझे पता है कि प्रत्येक div और उनके संबंधित मार्जिन पर पिक्सेल का क्या मूल्य है ... इसलिए मैं निम्नलिखित कार्य करता हूं।

मैं एक रैपर div बनाऊंगा जिसमें एक पूर्ण स्थिति और 50% का एक बायां मूल्य है ... इसलिए यह div अब स्क्रीन के बीच में शुरू होता है, और फिर मैं div की चौड़ाई की सभी सामग्री का आधा हिस्सा घटा देता हूं ... और मुझे पूरी तरह से स्केलिंग सामग्री मिलती है ... और मुझे लगता है कि यह सभी ब्राउज़रों में भी काम करता है। इसे स्वयं के लिए आज़माएँ (यह उदाहरण मानता है कि आपकी साइट की सभी सामग्री एक div टैग में लिपटी है जो इस आवरण वर्ग का उपयोग करती है और इसमें सभी सामग्री चौड़ाई में 200px है):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

संपादित करें: मैं जोड़ना भूल गया ... आप चौड़ाई निर्धारित करना चाहते हैं: 0px; कुछ ब्राउज़रों के लिए इस आवरण div पर स्क्रॉलबार नहीं दिखाया गया है, और फिर आप सभी आंतरिक div के लिए पूर्ण स्थिति का उपयोग कर सकते हैं।

यह आपकी सामग्री को लंबवत रूप से संरेखित करने के साथ-साथ शीर्ष: 50% और मार्जिन-टॉप का उपयोग करने के लिए भी अद्भुत काम करता है। चीयर्स!

— एलेक्ज़ेंड्रु
स्रोत

2

यहाँ एक तकनीक है जिसका मैं उपयोग करता हूँ जिसने अच्छी तरह से काम किया है:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

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

— खोजी कुत्ता
स्रोत

2

नीचे वे तरीके दिए गए हैं जो हमेशा मेरे लिए काम करते हैं

फ्लेक्स लेआउट मॉडल का उपयोग करके :

पैरेंट डिव का प्रदर्शन सेट करें display: flex;और आप डिव के अंदर बाल तत्वों को justify-content: center;(मुख्य अक्ष पर आइटम संरेखित करने के लिए) और align-items: center;(क्रॉस एक्सिस पर आइटम संरेखित करने के लिए ) संरेखित कर सकते हैं।

यदि आपके पास एक से अधिक बाल तत्व हैं और वे जिस तरह से व्यवस्थित हैं (स्तंभ / पंक्तियों) को नियंत्रित करना चाहते हैं, तो आप flex-directionसंपत्ति भी जोड़ सकते हैं।

काम करने का उदाहरण:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

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

2. (पुरानी विधि) स्थिति, मार्जिन गुणों और निश्चित आकार का उपयोग करना

काम करने का उदाहरण:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

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

— nmak18
स्रोत

1

सभी उत्तर क्षैतिज संरेखण के बारे में बात करते हैं।

कई सामग्री तत्वों को ऊर्ध्वाधर संरेखित करने के लिए, इस दृष्टिकोण पर एक नज़र डालें:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

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

— निकोलस
स्रोत

-2

HTML और CSS का उपयोग करते हुए बस एक और उदाहरण:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— डियोगो
स्रोत

27

आपके द्वारा लिखा गया कोई भी ASP.NET के लिए विशिष्ट नहीं है। यह सिर्फ HTML और इनलाइन CSS है। क्या आपके पास संपत्तियों के साथ एक सर्वर नियंत्रण लिखने का मतलब है?

— वेबवॉच

1

फिक्स्ड। उत्तर में अब सही तकनीकों का उल्लेख है।

— जॉनी