फ्लेक्सबॉक्स

Question

के साथ लंबवत केंद्र आइटम मैं सीएसएस के फ्लेक्सबॉक्स के साथ लंबवत केंद्रों को रखने की कोशिश कर रहा हूं; और, मुझे पता है कि गैर-विक्रेता-प्रीफ़िक्स्ड कोड के साथ इसे कैसे किया जाए, लेकिन विक्रेता उपसर्गों के साथ भी मैं इसे वेबकिट (क्रोम) में काम नहीं कर सकता।

मैं #trigger में स्पैन को लंबवत रूप से संरेखित करने का प्रयास कर रहा हूं।

#trigger{ 
    /* 2009 syntax */ 
    display: -webkit-box; 
    display: box; 
    /* current syntax */ 
    display: -webkit-flex; 
    display: flex; 
} 

#trigger span{ 
    /* 2009 syntax */ 
    -webkit-box-align: center; 
    /* current syntax */ 
    -webkit-align-items: center; 
    flex-align: center; 
} 

कोई भी विचार क्या मैं गलत कर रहा हूँ:

यहाँ मेरी सीएसएस है?

और यदि आप उन गुणों के अन्य विक्रेता उपसर्ग/संस्करणों को जानते हैं जो मैं उपयोग कर रहा हूं, तो उन्हें साझा करने में संकोच न करें ताकि यह केवल वेबकिट से अधिक काम कर सके।

Answer 1

align-items संपत्ति फ्लेक्स कंटेनर (उन्हें करने के लिए लागू display: flex साथ तत्व), नहीं फ्लेक्स आइटम (फ्लेक्स कंटेनरों के बच्चों) के लिए है। पुरानी 200 9 की कल्पना में align-items की तुलना में कोई संपत्ति नहीं है; 200 9 से box-align संपत्ति मानक स्पेक से align-content तक की है।

http://jsfiddle.net/mnM5j/2/

#trigger { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    text-align: center; 
    height: 10em; 
    background: yellow; 
} 

<div id="trigger"> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span> 
</div> 

Answer 2

एक खड़ी गठबंधन लेआउट निम्नलिखित गुणों के साथ प्राप्त किया जा सकता, कृपया ध्यान दें कि इस पुराने सिंटैक्स का उपयोग होता है, हालांकि मैं नवीनतम क्रोम, फायरफॉक्स & फ़ायरफ़ॉक्स अरोड़ा के बनाता है पर परीक्षण किया है -

#trigger { 
    width: 200px; 
    height: 200px; 

    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 

    display: -moz-box; 
    -moz-box-orient: vertical; 
    -moz-box-pack: center; 
    -moz-box-align: center; 

    display: box; 
    box-orient: vertical; 
    box-pack: center; 
    box-align: center; 
} 

#trigger span { 
    display: block; 
} 

box-orient निर्दिष्ट बॉक्स के बच्चों को कैसे गठबंधन किया जाना चाहिए, जो हमारे मामले में लंबवत है।

box-pack बॉक्स-ओरिएंट अक्ष के साथ बच्चों को संरेखित करता है।

box-align बॉक्स के अंदर बच्चों को संरेखित करता है, यह अक्ष बॉक्स-ओरिएंट अक्ष के लंबवत है, यानी हमारे मामले में बॉक्स-ओरिएंटेशन लंबवत है, यह क्षैतिज बच्चों के संरेखण का निर्णय लेगा।

यहां एक Codepen demonstration है, गुणों को मैंने display: block के अलावा स्पैन तत्वों पर लागू किया है जो पूरी तरह कॉस्मेटिक उद्देश्यों के लिए हैं।