HTML अवधि संरेखण केंद्र काम नहीं कर रहा है?

107

मेरे पास कुछ HTML हैं:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

डिव मेरे दस्तावेज़ पर रिक्ति बदल रहा है, इसलिए मैं इसके बजाय एक स्पैन का उपयोग करना चाहता हूं।

लेकिन अवधि सामग्री को केंद्रीकृत नहीं कर रही है:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

मैं यह कैसे तय करुं?

संपादित करें:

मेरा पूरा कोड:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— David19801
स्रोत

1

आपका div "रिक्ति बदलना" है? इससे तुम्हारा क्या मतलब? और आपका स्पैन नहीं होगा क्योंकि डिफ़ॉल्ट रूप से यह एक इनलाइन एलिमेंट है, जबकि डिव एक ब्लॉक लेवल एलिमेंट है।

— बोजैंगल्स

हैलो JamWaffles, "रिक्ति" से मेरा मतलब है कि div सामग्री के ऊपर और नीचे स्थान जोड़ता है। स्पान ऐसा नहीं करता है।

— डेविड १

सीएसएस नियम आपके तत्व पर लागू होते हैं यह देखने के लिए फायरबग या क्रोम इंस्पेक्टर का उपयोग करें, और जो पेडिंग या मार्जिन जोड़ता है उसे देखें। यह भी संभव है कि आसपास के तत्वों में पैडिंग / मार्जिन हो।

— बोजैंगल्स

5

text-align=centerहोना चाहिएtext-align:center

— n611x007

197

एक div एक ब्लॉक एलिमेंट है, और कंटेनर की चौड़ाई को तब तक फैलाएगा जब तक कि एक चौड़ाई सेट न हो जाए। एक स्पैन एक इनलाइन तत्व है, और इसके अंदर पाठ की चौड़ाई होगी। वर्तमान में, आप एक सीएसएस संपत्ति के रूप में संरेखित करने का प्रयास कर रहे हैं। संरेखित करना एक विशेषता है।

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

हालांकि, संरेखित विशेषता पदावनत है। आपको text-alignकंटेनर पर CSS संपत्ति का उपयोग करना चाहिए ।

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— मर्जी
स्रोत

47

कृपया निम्न शैली का उपयोग करें। margin:autoसामान्य रूप से सामग्री को संरेखित करने के लिए उपयोग किया जाता है। तत्व के display:tableलिए आवश्यक spanहै

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— क्रिस जे
स्रोत

37

alignविशेषता मान्य नहीं है। text-alignइसके बजाय CSS का उपयोग करें । इसके अलावा, स्पान पाठ का केंद्र तब तक नहीं होगा जब तक आप चौड़ाई के लिए मूल्य का उपयोग display:blockया display:inline-blockसेट नहीं करते हैं , लेकिन तब यह एक डिव (ब्लॉक तत्व) के समान व्यवहार करेगा।

क्या आप अपने लेआउट का एक उदाहरण पोस्ट कर सकते हैं? Www.jsfiddle.net का उपयोग करें

— लूसिफ़ेर सैम
स्रोत

बढ़िया काम किया! धन्यवाद।

— dallinchase 20

क्या मैं इनलाइन तत्वों को रखते हुए दो इनलाइन तत्वों को अलग-अलग संरेखित नहीं कर सकता?

— डैनियल स्प्रिंगर 2

11

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

मेरे लिए इसने बहुत अच्छा काम किया। यह भी कोशिश करो

— aimable
स्रोत

2

अन्य सभी स्पष्टीकरणों के आधार पर, मेरा मानना है कि आप "="बृहदान्त्र के बजाय समान चिह्न का उपयोग कर रहे हैं ":":

<span style="border:1px solid red;text-align=center">

यह होना चाहिए:

<span style="border:1px solid red;text-align:center">

— nhazean
स्रोत

1

स्पैन इनलाइन-ब्लॉक है और इनलाइन टेक्स्ट के आकार को समायोजित करता है, एक तप के साथ जो इनलाइन संदर्भ से बाहर शैली के अधिकांश प्रयासों को अवरुद्ध करता है। लेआउट शैली को सरल बनाने के लिए (सीमा संघर्ष), लाइन ब्रेक के साथ 'पी' टैग में div जोड़ें।

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— स्टीवर्ट चिह्नित करें
स्रोत

-7

महज प्रयोग करें word-wrap:break-word; सीएसएस में । यह काम करता हैं।

— सोमवार
स्रोत