इनलाइन-ब्लॉक को एक ही लाइन पर क्षैतिज रूप से संरेखित करना

समस्या

इनलाइन-ब्लॉक बेसलाइन संरेखण और स्वचालित केंद्रिंग जैसे फ्लोटिंग तत्वों पर लाभ प्रदान करते हैं जब व्यूपोर्ट संकीर्ण हो जाता है. हालाँकि, दो इनलाइन-ब्लॉक को एक ही लाइन पर क्षैतिज रूप से संरेखित करना एक चुनौती पैदा कर सकता है। .

सापेक्ष और पूर्ण स्थिति से फ्लोट के समान रिक्ति संबंधी समस्याएं हो सकती हैं।

• समाधान: टेक्स्ट जस्टिफिकेशन का उपयोग करना
• एक प्रभावी समाधान में टेक्स्ट-संरेखण का उपयोग करना शामिल है : औचित्य तकनीक:

सीएसएस कोड

.हेडर { पाठ-संरेखण: औचित्य सिद्ध करें; पृष्ठभूमि: #सीसीसी; } .हेडर:बाद में { सामग्री: ''; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 100%; ऊंचाई: 0; फ़ॉन्ट-आकार: 0; लाइन-ऊंचाई: 0; } h1 { प्रदर्शन: इनलाइन-ब्लॉक; मार्जिन-टॉप: 0.321em; } .एनएवी { प्रदर्शन: इनलाइन-ब्लॉक; लंबवत-संरेखण: आधार रेखा; }

स्पष्टीकरण

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

एक छद्म-तत्व शीर्षलेख जोड़ें:बाद में इनलाइन-ब्लॉक के बीच शेष स्थान का उपभोग करने के लिए।