2010-02-17 16 views
26

मैं इस पृष्ठ पर newsslider केंद्र के लिए (div नीचे कंटेनर में) कोशिश कर रहा हूँ में एक div:केंद्र सीएसएस

http://www.luukratief-design.nl/dump/parallax/index.html

मैं पहले से ही text-align: center;

है फिर भी यह काम नहीं करता ।

कोई सुझाव?

+4

मैं इस सवाल को ऑफ-विषय के रूप में बंद करने के लिए मतदान कर रहा हूं क्योंकि लिंक केवल प्रश्न और लिंक मर चुका है! –

उत्तर

55

text-align: center; केवल तत्व के इनलाइन सामग्री, नहीं तत्व में ही केंद्रित है।

अगर ऐसा है एक block element, आप margin: 0 auto; निर्धारित करने की आवश्यकता है, और अगर यह एक inline element है, आप के बजाय अपने माता पिता तत्व पर text-align: center; निर्धारित करने की आवश्यकता (एक div है)।

margin: 0 auto;0 को ऊपर और नीचे मार्जिन और (एक ही आकार के) auto को छोड़ दिया और सही मार्जिन सेट हो जाएगा इतना है कि यह पूर्ण रूप से अपने केंद्र में ही डालता है। यह केवल तभी काम करता है जब प्रश्न में ब्लॉक तत्व width (या तो निश्चित या रिश्तेदार) है, अन्यथा यह नहीं पता कि कहां से शुरू करना और समाप्त करना है।

+3

और आपको "div" को एक स्पष्ट चौड़ाई भी देनी पड़ सकती है। –

+2

हां, आपको वास्तव में ब्लॉक तत्व को एक स्पष्ट चौड़ाई देने की आवश्यकता है, मैंने इसे संपादित किया है। – BalusC

+0

आईआईआरसी, आईई के कुछ पुराने संस्करण 'ऑटो' मार्जिन मानों को पहचान नहीं पाएंगे, लेकिन वे * (* गलती से) टेक्स्ट का उपयोग करेंगे केंद्र ब्लॉक तत्वों के लिए साइन-इन करें, इसलिए यदि आप कर सकते हैं तो दोनों का उपयोग करें। –

0

इसे शैली में जोड़ने का प्रयास करें।

margin-left: auto; 
-3

एकल पंक्ति और तीन कॉलम, छोड़ दिया सेट और 100% करने के लिए सही चौड़ाई और देखा, बीच एक स्वचालित रूप से केंद्रित हो जाता है

+1

यह एक वैध उत्तर है। अधिकांश परिदृश्यों में अव्यवहारिक, हां। फिर भी, अभी भी मान्य है। कृपया एक वैध उत्तर को बंद करना बंद करें क्योंकि आप इसे 'ऐसा महसूस करते हैं।' –

3

पाठ के अनुरूप एक ब्लॉक तत्व केंद्रित करने के लिए नहीं किया जाना चाहिए के साथ एक मेज बनाएं । (आईई 6 को छोड़कर, लेकिन यह bug है)

आपको ब्लॉक की चौड़ाई को ठीक करना है, फिर मार्जिन का उपयोग करें: 0 ऑटो;

#block 
{ 
    width: 200px; 
    border: 1px solid red; 
    margin: 0 auto; 
} 

और

<div id="#block">Some text... Lorem ipsum</div> 
0

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

#bottombox { 
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0; 
float:none; 
height:137px; 
margin:0 auto; 
padding-top:14px; 
width:296px; 
} 

कि आपके पाद लेख में div केंद्रित हो जाएगा।

3

एक ही रास्ता:

<div align="center">you content</div> 

बेहतर तरीका: myDIV के लिए

<div id="myDiv">you content</div> 

सीएसएस:

#myDiv{ 
margin:0px auto; 
} 
1

मैं हमेशा

का उपयोग कंटेनर, display: inline-block आवरण div के लिए के लिए 10
<div align="center">Some contents......</div> 
+0

मैं पुष्टि करता हूं कि यह फ़ायरफ़ॉक्स (v54), क्रोम (v58) और सफारी (v10) के साथ काम करता है। –

0

उपयोग text-align: center, और display: inline सामग्री div के लिए क्षैतिज केंद्र सामग्री ब्राउज़रों में एक अपरिभाषित चौड़ाई है कि करने के लिए:

<!doctype html> 
    <html lang="en"> 
    <head> 
     <style type="text/css"> 

    /* Use inline-block for the wrapper */ 
    .wrapper { display: inline-block; } 

    .content { display:inline; } 

    .container { text-align:center; } 

    /*Media query for IE7 and under*/ 

    @media, 
     { 
     .wrapper { display:inline; } 
     } 
     </style> 

     <title>Horizontal Centering Test</title> 
    </head> 

    <body> 

     <div class="container"> 
     <div class="content"> 
      <div class="wrapper"> 
       test text 
      </div> 
     </div> 
     </div> 
    </body> 
    </html> 
1

प्रदान की चौड़ाई सेट कर दिया जाता है, और आप एक उचित DOCTYPE शब्दों में कहें,

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

Margin-left: auto; 
Margin-right: auto; 

आशा इस HEL पीएस

संबंधित मुद्दे