2013-10-14 9 views
8

में आदेशित सूची संख्या को कैसे केन्द्रित करें मैं वर्तमान में एचटीएमएल प्रोग्रामिंग सीख रहा हूं।एचटीएमएल

अगर मैं इस तरह से रख::

<html> 
<body align="middle"> 
HEADLINE 
<ol> 
<li>First Item</li> 
</ol> 
</body> 
</html> 

समस्या संख्या (1.) बाईं तरफ है जब मैं यह शीर्षक के अंतर्गत गठबंधन किया जाना चाहता था है मैं एक समस्या है। मैं पूरी सूची आइटम को बीच में कैसे प्राप्त कर सकता हूं? शरीर में ALIGNING

+0

आप ठीक दिखाने के लिए आप क्या चाहते हैं एक तस्वीर है? –

+2

क्या आप सीएसएस से बिल्कुल परिचित हैं? 'ओएल ली {पाठ-संरेखण: केंद्र; चौड़ाई: 300px; } 'उदाहरण के लिए –

+0

यह सीएसएस के लिए नौकरी की तरह लगता है, HTML नहीं। –

उत्तर

26

आप संरेखित कर रहे हैं ग्रंथों:

मैं चित्रों को जोड़ने के लिए आप तस्वीर देखने के लिए के लिए तो मैं एक और वेबसाइट के लिंक प्रदान करेंगे कम से कम 10 प्रतिष्ठा की जरूरत है।

इस प्रयास करें:

.center { 
 
    text-align: center; 
 
    list-style-position: inside; 
 
}
<h4 align="center">HEADLINE</h4> 
 
<ol class="center"> 
 
    <li>First Item</li> 
 
</ol>

+0

यह मेरे लिए काम करता है, यह एक अलग सीएसएस फ़ाइल में क्यों काम नहीं करता जैसा मैंने करने की कोशिश की? – Nikolas

+3

पाठकों के लिए - इसकी कुंजी 'सूची-शैली-स्थिति: अंदर;' है। यह ब्राउज़र को सूची मार्कर (इस मामले में संख्या) को टेक्स्ट के साथ इनलाइन प्रदान करने का कारण बनता है, इसलिए यह 'टेक्स्ट-एलाइन' से प्रभावित हो सकता है। – Beejamin

1

निकोलस, सीएसएस में एक आदेश दिया सूची पर संख्या संरेखित इस प्रकार है:

 ol 
    { 
     display: inline-block; 
     margin-left: auto; 
     margin-right: auto; 
    } 

** आप एक प्रदर्शन- का उपयोग करना चाहिए ब्लॉक करें क्योंकि सूची के साथ संख्याओं को केन्द्रित करने के लिए आपको अपनी सूची को एक बॉक्स में रखना होगा।

0

नूनो डुआर्ट के उत्तर के आगे आप सूची संख्याओं के बाद ब्रेक जोड़ सकते हैं (मुझे लगता है) यह केंद्रित मोड में बेहतर दिखता है। (अस्वीकरण: ब्राउज़रों में परीक्षण किया नहीं)

.text-center { 
 
    text-align: center; 
 
} 
 
ol.text-center { 
 
    list-style-position: inside; 
 
    padding-left: inherit; /*Get rid of padding to center correctly*/ 
 
} 
 
    ol.text-center > li::before { 
 
     content: "\A"; 
 
     white-space: pre; 
 
    }
<h4 class="text-center">HEADLINE</h4> 
 
<ol class="text-center"> 
 
    <li>First Item</li> 
 
</ol>