लंबवत केंद्र उल div

Question

यह मेरा कोड जैसा दिखता है।

एचटीएमएल

<div id="container"> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</div> 

सीएसएस

#container { 
    width: 584px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
} 

#container ul { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    width: 3504px; 
} 

#container ul li { 
    width: 584px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

शीर्षक कहते हैं, मैं div के अंदर खड़ी उल केंद्रित करने के लिए चाहते हैं। मैं उपर्युक्त सीएसएस नियमों को नहीं बदल सकता क्योंकि। मैं समाधानों को हल कर रहा हूं और एक रास्ता खोजने की कोशिश कर रहा हूं, लेकिन सब कुछ मेरे पास पहले से मौजूद नियमों के साथ टकरा रहा है।

कोई विचार यह कैसे करना है?

#container div के बजाय यदि यह एक पंक्ति और स्तंभ के साथ तालिका का उपयोग करता है तो यह मदद करेगा?

Answer 1

आप jQuery पुस्तकालय आप इस कोशिश कर सकते जोड़ सकते हैं,

$(document).ready(function(){ 

    // Remove li float 
    $("#container ul li").css("float", "none"); 

    // Get the full height of the UL 
    var ulheight = $("#container ul li")[0].scrollHeight; 

    // Based on the height of the container being 50px you can position the UL accordingly 
    var pushdown = (50-ulheight)/2; 
    $("#container ul li").css("top", pushdown); 

}); 

Answer 2

"केंद्रित" एक div या अन्य कंटेनरों खड़ी यहाँ सीएसएस में काफी मुश्किल है, अपने विकल्प हैं।

#container { 
    position: absolute; 
    top: 50%; 
    margin-top: -half_of_container_height_here; 
} 

तो हम अनिवार्य रूप से बीच में जगह है और फिर इसे ऑफसेट:

अपने कंटेनर

की ऊंचाई पता है कि तुम कंटेनर की ऊंचाई पता है, तो आप निम्न कर सकते हैं नकारात्मक मार्जिन ऊंचाई के आधे के बराबर का उपयोग कर। आपके माता-पिता कंटेनर को position: relative होना चाहिए।

अपने कंटेनर

की सही ऊंचाई इस मामले आप जावास्क्रिप्ट का उपयोग करें और उचित हाशिये की गणना करनी में पता नहीं है (दुर्भाग्य से आप margin-top: auto या कुछ इसी तरह का उपयोग नहीं कर सकते हैं)।

More info here।

Answer 3

भविष्य में खोज फ़ंक्शन का उपयोग करें। पूरा उत्तर here समझाया गया है;

.container { 
    display: table; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    width: 100%;} 
.helper { 
    #position: absolute; /*a variation of an "lte ie7" hack*/ 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle;} 
ul{ 
    #position: relative; 
    #top: -50%; 
    margin:0 auto; 
    width:200px;} 

तीन तत्वों है तो तरह नेस्ट जाना है::

<div class="container"> 
    <div class="helper"> 
    <ul><!--stuff--></ul> 
    </div> 
</div> 

http://jsfiddle.net/ovfiddle/yVAW9/

Answer 4

अब आप पैरेंट कंटेनर प्रदर्शन कर सकते हैं: फ्लेक्स और align- यह आपके परिदृश्य के लिए कोड है आइटम: केंद्र। यह काम करना चाहिए। हालांकि पुराने ब्राउज़र द्वारा flexbox गुण समर्थित नहीं हैं।