सीएसएस: केंद्र क्षैतिज और ऊर्ध्वाधर दोनों पाठ?

मैं एक नई वेबसाइट बना रहा हूं और मुझे कुछ जानना है (उदाहरण के साथ दिखाया जाएगा)।सीएसएस: केंद्र क्षैतिज और ऊर्ध्वाधर दोनों पाठ?

आइए कहें कि मैंने यह किया:

एचटीएमएल;

<div id="center-in-bar"> 
    <ul> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
</div>

और सीएसएस:

#center-in-bar { 
    list-style:none; 
    display:inline-block; 
    /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/ 
}

क्या मैं सभी ली दोनों क्षैतिज और ऊर्ध्वाधर केंद्रित तत्वों बनाने के लिए करते हैं? केंद्र-इन-बार तत्व में?

कोई मदद appriciated किया जाएगा :))

स्रोत

2011-11-18 Stian Olsen

खड़ी केंद्रित एक बहुत ही आसान काम और दृष्टिकोण यह निश्चित कसौटी पर निर्भर करता है को प्राप्त करने के लिए नहीं है (वहाँ कुछ अलग तरीके हैं, लेकिन प्रत्येक की स्थिति है)। –

इस सीएसएस टुकड़ा का प्रयास करें:

#center-in-bar ul { 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
} 
#center-in-bar li { 
    ... 
    display:inline; /* you might want to use this instead of "inline-block" */ 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
}

स्रोत

2011-12-12 15:55:56

किसी तरह, वहां अभी भी ऐसा करने के लिए कोई मानक है, लेकिन मेरे अनुभव में निम्नलिखित शायद समग्र सबसे विश्वसनीय समाधान है:

<style type="text/css"> 
    #container {  
     display:table;  
     border-collapse:collapse; 
     height:200px; 
     width:100%; 
     border:1px solid #000; 
    }   
    #layout {  
     display:table-row;  
    }    
    #content {  
     display:table-cell; 
     text-align:center; 
     vertical-align:middle;  
    }    
</style>  
<div id="container">  
    <div id="layout">  
     <div id="content"> 
      Hello world! 
     </div>  
    </div>  
</div>

यहाँ एक और तकनीक है जो केन्द्रित-मध्य स्थिति को अनुकरण करने के लिए सापेक्ष और पूर्ण स्थिति का उपयोग करता है। इस तकनीक सटीक नहीं है, लेकिन यह किसी भी ब्राउज़र (यहां तक कि जल्दी वाले) के साथ संगत होना चाहिए:

<style type="text/css"> 
    #vertical{ 
     position:absolute; 
     top:50%; /* adjust this as needed */  
     left:0; 
     width:100%; 
     text-align:center; 
    } 
    #container { 
     position:relative; 
     height:200px; 
     border:1px solid #000; 
    } 
</style>   
<div id="container"> 
    <div id="vertical"> 
     Hello world! 
    </div>    
</div>

महत्वपूर्ण नोट:

इस प्रश्न पूछा जाता है जब कोई हमेशा line-height एक के रूप में सुझाव देने के लिए लगता है समाधान, लेकिन मैं आपको उस सुझाव को स्पष्ट करने के लिए आग्रह करता हूं। यह अच्छा लगता है जब आप "हैलो वर्ल्ड" जैसे कुछ सरल प्रदर्शन कर रहे हैं, लेकिन line-height टेक्स्ट लपेटने पर बहुत ही भयंकर तोड़ता है।

स्रोत

2011-11-18 18:32:36

ध्यान दें कि 'टेबल-सेल' विधि आईई के कुछ संस्करणों में काम नहीं करती है। – Sparky

धन्यवाद, बहुत मदद की :) –

कोई समस्या नहीं है। यदि आप संतुष्ट हैं तो उत्तर को चिह्नित करना न भूलें। –

कैसे करने के लिए क्षैतिज केन्द्र एक ब्लॉक मद (एक div की तरह) या इनलाइन मद (जैसे लेख)

मान लीजिए कि आप एक ब्राउज़र पृष्ठ पर एक दस्तावेज़ केंद्र के लिए करना चाहता था दो, ताकि कोई फर्क नहीं पड़ता कि आप कितना बड़ा आकार परिवर्तन आपके ब्राउज़र तत्व हमेशा केंद्रित है:

body { 
    margin:50px 0px; padding:0px; 
    text-align:center; 
    } 

    #Content { 
    width:500px; 
    margin:0px auto; 
    text-align:left; 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
    }

लिखने के लिए अपने शरीर टैग के बीच में क्षैतिज कुछ केंद्रित के लिए इस HTML:

<body> 
<div id="Content">I am a centered DIV</div> 
</body>

यह क्षैतिज रूप से ब्लॉक स्तर तत्वों को केंद्र करेगा। पाठ, स्पान, या अन्य इनलाइन तत्वों को केंद्रित करने के सभी आप जोड़ने की जरूरत होती है:

#Content { 
    width:500px; 
    margin:0px auto; 
    text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 

    }

खड़ी कैसे केन्द्र एक ब्लॉक मद (जैसे एक div) या इनलाइन मद (जैसे लेख)

नोट: लंबवत केंद्र तत्वों के लिए लाइन-ऊंचाई का उपयोग न करें, क्योंकि यह केवल टेक्स्ट की एक पंक्ति के लिए काम करेगा और कुछ भी नहीं।

लंबवत केंद्रित वस्तुओं के लिए, के आधार पर आप 3-5 विधियों का उपयोग कर सकते हैं, यह आप केंद्र में रहने की कोशिश कर रहे हैं।

इस साइट में आप के लिए आसानी से एक विधि का वर्णन करता है: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

बेस्ट ऑफ लक!

स्रोत

2011-11-18 19:31:38 Downpour046

आप line-height और ऊंचाई को एक जैसा मान देना चाहिए।

#center-in-bar li 
{ 
height: 30px 
line-height: 30px; 
text-align: center;}

भी इसे देखो: Text align vertical within li

स्रोत

2012-05-25 11:50:11 efirat

सीएसएस: केंद्र क्षैतिज और ऊर्ध्वाधर दोनों पाठ?

उत्तर

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