html - CSS vertical align inside a FIXED position div -

मेरे पास एक शीर्ष है: फिक्स्ड स्थिति।

यहां सीएसएस है:

  #header {position: fixed; ऊंचाई: 6 एएम; प्रदर्शन क्षेत्र; चौड़ाई: 100%; पृष्ठभूमि: आरजीबीए (255, 255, 255, 1); z- सूचकांक: 9; text-align: केंद्र; रंग: # 000000; }  

और अंदर, मैं बीच का मध्य और ऊर्ध्वाधर मध्य मध्य केंद्र चाहता हूँ। यहां तक ​​कि मेरे पास अभी तक है, लेकिन यह काम नहीं कर रहा है सभी उदाहरण ऑनलाइन कंटेनर के रूप में एक पूर्ण स्थिति के साथ दिखाता है, लेकिन यह निश्चित एक के साथ काम नहीं कर रहा है।

HTML:

  & lt; div id = "header" & gt; & Lt; div id = "bandname" & gt; बीवॉल्फ फोटोग्राफ़ी & lt; / div & gt; & Lt; div id = "insta" & gt; & lt; img src = "imgs / insta.png" width = "40" alt = "टैबलेट" / & gt; & lt; / div & gt; & Lt; div id = "bandname" & gt; बीवॉल्फ फोटोग्राफ़ी & lt; / div & gt; & Lt; / div & gt;  

पाठ और छवि के लिए सीएसएस:

  #bandname {display: inline-block; फ़ॉन्ट आकार: 2.8 एम; पैडिंग: 0 पिक्स 0 पिक्स 0 0; ऊर्ध्वाधर-पंक्ति: बीच; पृष्ठभूमि: आरजीबीए (0, 255, 0, 1); } #insta {display: inline-block; पैडिंग: 0 पिक्स 0 पिक्स 0 पिक्स 50 पिक्स; ऊर्ध्वाधर-पंक्ति: बीच; }  

मुझे यह समझ नहीं आ रहा है कि ...

मैंने

  लाइन-ऊँचाई: 6 एएम का प्रयोग करने की कोशिश की है;  

मदद की सराहना की जाएगी .. धन्यवाद, लेकिन यह भी काम नहीं करता है।

छद्म तत्व ऊर्ध्वाधर केंद्र चाल का प्रयोग करें।

#header: से पहले केंद्र को इनलाइन तत्वों को नीचे लाता है शीर्ष लेख के सीधे बच्चों को एक सीधी रेखा रखने के लिए डिस्प्ले: इनलाइन ब्लॉक और वर्टिकल-संरेखित: मध्य दिया जाता है।

< P> यह तकनीक मूल रूप से आपकी बाकी सामग्री से पहले "div" जोड़ती है (इसे वास्तविक & lt; div & gt; से बदला जा सकता है, अगर आपको वास्तव में इसे IE7 और नीचे काम करने की आवश्यकता है। [चिंता न करें!]) यह मूल रूप से इस तरह दिखता है:

  & lt; div class = "header" & gt; & Lt;! - सीएसएस द्वारा जोड़ा - & gt; & Lt; div & gt; मैं हूं: पहले और आप सभी करेंगे जैसा मैं कहता हूं! बीच में, plebs! & Lt; / div & gt; & Lt;! - अंत सीएसएस सामग्री - & gt; & Lt; div & gt; हाँ मास्टर! & Lt; / div & gt; & Lt; div & gt; जो भी आप कहते हैं, सर! & Lt; / div & gt; & Lt; / div & gt;  

कार्य का उदाहरण

नोट: मैंने छवि के चारों ओर से div को निकाल दिया। यह अनावश्यक लगता है, लेकिन अगर जरूरत पड़ने पर उसे वापस रखा जा सकता है इसके अलावा, मैंने सीधे बच्चों के चयनकर्ता का उपयोग करके #header के सीधे बच्चों को लक्षित किया है: & gt;

  #header {स्थान: तय; ऊंचाई: 6 एएम; प्रदर्शन क्षेत्र; चौड़ाई: 100%; पृष्ठभूमि: आरजीबी (0, 255, 255); / * फ़ॉल-बैक ब्राउज़र के लिए जो आरजीबीए * / पृष्ठभूमि का समर्थन नहीं करते हैं: आरजीबीए (0, 255, 255, 1); Z- इंडेक्स: 9; पाठ संरेखित करें: केंद्र; रंग: # 000000; शीर्ष: 0 पिक्सेल; } #header: {content: ''; प्रदर्शन: इनलाइन-ब्लॉक; ऊर्ध्वाधर-पंक्ति: बीच; ऊंचाई: 100%; } # हेडर & gt; Div, #header & gt; आईएमजी {डिस्प्ले: इनलाइन-ब्लॉक; फ़ॉन्ट आकार: 2.8 एम; पैडिंग: 0 पिक्स 0 पिक्स 0 0; ऊर्ध्वाधर-पंक्ति: बीच; }  

  & lt; div id = "header" & gt; & Lt; div id = "bandname" & gt; टेस्ट & lt; / div & gt; & Lt; img src = "http://www.placehold.it/50" width = "40" alt = "टैबलेट" / & gt; & Lt; div id = "bandname" & gt; टेस्ट & lt; / div & gt; & Lt; / div & gt;