2010-02-17 12 views
13

HI सब,कैसे संरेखित करने के लिए मुख्य div कंटेनर लाने के लिए केंद्र के लिए

मैं allways सोच कर दिया गया है कि कैसे अन्य लोगों को केंद्र के लिए एक ही रास्ता मैं अब तक का प्रबंधन के रूप में मुख्य div कंटेनर संरेखित करने के लिए प्राप्त करने के लिए जोड़ रहा है सीएसएस निम्नलिखित फ़ाइल:

* { पैडिंग: ऑटो; मार्जिन: ऑटो; टेक्स्ट-संरेखण: केंद्र; }

मैं का उपयोग अन्य पृष्ठों को देखा है: * {padding: 0px; मार्जिन: 0px} लेकिन मैं नहीं कर सकते जहां या क्या करते हैं वे करते हैं, मुख्य कंटेनर केंद्रीकृत करने के लिए देखते हैं।

क्या कोई बता सकता है कि कैसे?

कोड उदाहरण:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> 
<title>This is the main container</title> 
<style type="text/css"> 
*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;"> 
<b>This is the main container.</b> 
</div> 
</body> 
</html> 

किसी को भी वे इसे कैसे निम्नलिखित पृष्ठ में क्या करते समझा सकते हैं? http://www.csszengarden.com/?cssfile=/179/179.css&page=4

धन्यवाद

+0

भी आप आप

के साथ सामग्री लपेट सकते हैं, लेकिन बेहतर समाधान पेज आप लिंक करने के लिए वे कंटेनर पर मार्जिन ऑटो का उपयोग करते हैं पर – ant

+1

नीचे है।हालांकि पैडिंग ऑटो की आवश्यकता नहीं है, और यहां तक ​​कि कुछ ब्राउज़रों को भी भ्रमित कर सकते हैं। – wheresrhys

+0

@ वेहेरेसिज़: धन्यवाद, मैं इसे सीएसएस पर नहीं ढूंढ सकता। – Amra

उत्तर

31

* का भी उपयोग कर के रूप में उस पृष्ठ पर सभी तत्वों के लिए लागू होगी न करें। मान लीजिए आप इस तरह की एक संरचना है:

... 
<body> 
    <div id="content"> 
     <b>This is the main container.</b> 
    </div> 
</body> 
</html> 

फिर आप का उपयोग कर #content div केंद्रित कर सकता है:

#content { 
    width: 400px; 
    margin: 0 auto; 
    background-color: #66ffff; 
} 

पता नहीं है क्या आप कहीं और देखा है लेकिन इस जाने का रास्ता है। * { margin: 0; padding: 0; } स्निपेट जो आपने देखा है, सभी ब्राउज़रों के लिए ब्राउज़र की डिफ़ॉल्ट परिभाषाओं को रीसेट करने के लिए है, ताकि आपकी साइट सभी ब्राउज़रों पर समान व्यवहार कर सके, इसका मुख्य कंटेनर केंद्रित करने के साथ कुछ भी नहीं है।

अधिकांश ब्राउज़र कुछ तत्वों के लिए डिफ़ॉल्ट मार्जिन और पैडिंग लागू करते हैं जो आम तौर पर अन्य ब्राउज़रों के कार्यान्वयन के अनुरूप नहीं होते हैं। यही कारण है कि इस तरह के 'रीसेटिंग' का उपयोग करने के लिए अक्सर इसे स्मार्ट माना जाता है।

+0

+1 बताता है .. – ant

+0

* लागू करने के लिए अच्छा अभ्यास नहीं है * {पैडिंग: 0 पीएक्स; मार्जिन: 0 पीएक्स;}, इसे और अधिक क्रॉस ब्राउज़र संगत बनाने के लिए? – Amra

+1

@ सीज़र लोप्स, मेरी राय में यह है, लेकिन ऐसा लगता है कि अन्यथा लोग सोचते हैं। लेकिन मैं कहूंगा कि इसके साथ आगे बढ़ें। –

1

मैं, * { text-align:center } घोषणा को छोड़ देते हैं जाएगा के रूप में यह सभी तत्वों के लिए केंद्र संरेखण सेट: snippet आप प्रस्तुत रीसेट रीसेट स्टाइलशीट का सबसे सरल है, तो आप विषय के बारे में अधिक पढ़ सकते हैं ।

एक निश्चित चौड़ाई कंटेनर के साथ आमतौर परmargin: 0 auto पर्याप्त होना चाहिए

2

आप पाठ के अनुरूप कर सकते हैं: केंद्र शरीर कंटेनर केंद्र के लिए। फिर टेक्स्ट-एलाइन: बाएं संरेखित करने के लिए सभी टेक्स्ट इत्यादि प्राप्त करने के लिए कंटेनर छोड़ दिया।

+0

स्टैक ओवरफ़्लो में आपका स्वागत है =) कृपया अपने उत्तरों को प्रारूपित करने के तरीके के मार्गदर्शन के लिए [स्टैक ओवरफ़्लो मार्कडाउन सहायता पृष्ठ] (http://stackoverflow.com/editing-help/) के माध्यम से पढ़ने के लिए एक पल लें। –

2

किसी पृष्ठ को केंद्रित करने का मूल सिद्धांत शरीर का सीएसएस और main_container सीएसएस होना है। यह कुछ इस तरह दिखना चाहिए:

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
#main_container { 
    margin: 0 auto; 
    text-align: left; 
} 
संबंधित मुद्दे