एक नौसेना बार को लंबवत

Question

मेरे पास दो तत्वों के साथ एक शीर्षलेख है। पहला एक छवि है जो एक कंपनी लोगो है और 25% चौड़ाई पर सेट है। दूसरा एक एनएवी बार है जिसमें इसके तत्व इनलाइन सेट करते हैं, इसलिए यह क्षैतिज है। मैं नेविगेशन बार को लंबवत केंद्र सेट करना चाहता हूं लेकिन मेरे जीवन के लिए इसे समझ नहीं सकता। मैंने एक तत्व को जो कुछ भी बताया है उसे सेट कर दिया है जो लंबवत-संरेखण का उपयोग कर सकता है और इसे लागू करने के लिए सब कुछ इनलाइन या टेबल सेल में डाल सकता है। कुछ भी काम नहीं करता है।

ध्यान रखें कि कारण मैं सिर्फ यह नहीं देते एक स्थिर क्योंकि पेज व्यापक हो जाता है के रूप में छवि ऊंचाई का विस्तार के रूप में आप ब्राउज़र का विस्तार इतना चौड़ाई करता है प्रतिशत गद्दी या मार्जिन शीर्ष है क्षैतिज एनएवी अधिक हो जाता है और जगह से बाहर।

मैं किसी ऑब्जेक्ट को लंबवत रूप से केंद्रित करने पर मैंने कोशिश की है (जितना अधिक मैं स्वीकार करना चाहता हूं) की सराहना करता हूं।

एचटीएमएल में कटौती:

<div id="container"> 
<header id="header" role="banner"> 
    <img src="images" /> 
    <nav id="nav" role="navigation"> 
    <ul> 
     <li><a href="#" title="About Us">About Us</a></li><li><a href="#" title="Biographies">Biographies</a></li><li><a href="#" title="Services">Services</a></li><li><a href="#" title="Careers">Careers</a></li><li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
    </nav> 
</header> 

सीएसएस कटौती:

header img { 
    height: auto; 
    width: 25%; 
    float: left; 
    } 

header nav { 
    width: 75%; 
    font-size: 1em; 
    } 

header nav li { 
    display: inline-block; 

    width: 19%; 
    } 

header nav li a { 
    background: #2CB2E6; 
    line-height: 

उसके बारे में यहां सरल jsFiddle: http://jsfiddle.net/LbTCT/

Answer 1

अपने मूल बेला की Here's a fork।

header img, header nav { 
    display: inline-block; 
    vertical-align: middle; 
} 

के बजाय कोशिश कर float को बातें: आप अपने लोगो पर inline-block और nav तत्व में ही स्थापित करने की जरूरत है।

Answer 2

सब कुछ डालने के बारे में उत्तर इनलाइन-ब्लॉक के रूप में सही है। दस्तावेज़ प्रवाह के बाहर तत्वों को तोड़ने के अलावा फ्लोट उस स्थिति में आपके लिए कुछ भी नहीं कर रहा है।

Example Fiddle

और प्रासंगिक सीएसएस परिवर्तन यहाँ हैं:

हालांकि, अगर आप पुराने ब्राउज़र लक्षित कर रहे हैं, यहाँ एक समाधान है कि उन है कि समर्थन नहीं करते के लिए काम करना चाहिए ऊर्ध्वाधर- align तालिका सेल के बाहर है

header { 
    position:relative; 
    display:block; 
} 
header:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content:" "; 
    clear: both; 
    height: 0; 
} 
header nav { 
    width: 70%; 
    font-size: 1em; 
    position: absolute; 
    top: 50%; 
    line-height: 200%; 
    margin-top: -2em; 
} 

Answer 3

यहां ऐसा करने का एक तरीका है जिसमें आपके मार्क-अप में एक छोटा बदलाव शामिल है।

<div id="header"> 
<header role="banner"> 
    <nav id="navigation" role="navigation"> 
     <ul> 
      <li> 
       <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
      </li> 
      <li><a href="#" title="About Us">About Us</a> 

      </li> 
      <li><a href="#" title="Biographies">Biographies</a> 

      </li> 
      <li><a href="#" title="Services">Services</a> 

      </li> 
      <li><a href="#" title="Careers">Careers</a> 

      </li> 
      <li><a href="#" title="Contact">Contact</a> 

      </li> 
     </ul> 
    </nav> 
    </header> 
</div> 

और सीएसएस लगता है: कुंजी

#header { 
     background-color: #cccccc; 
     padding: 5px 0; 
    } 
    header { 
     background-color: #f0f0f0; 
    } 
    header nav { 
     border: 1px solid red; 
    } 
    header nav ul { 
     margin: 0; 
     padding: 0; 
    } 
    header nav li { 
     display: inline; 
     margin: 0; 
     padding: 0; 
    } 
    header nav li img { 
     vertical-align: middle; 
     border: 1px solid blue; 
    } 
    header nav li a { 
     vertical-align: middle; 
     font-size: 1.00em; 
     text-decoration: none; 
     background-color: white; 
     color: black; 
     padding: 10px; 
     margin: 0 0 0 10px; 
    } 

अपनी सूची के पहले <li> तत्व में लोगो छवि जगह है। फिर आप सूची के सभी तत्वों को inline के रूप में प्रदर्शित करते हैं और उन्हें लाइन करने के लिए vertical-align: middle का उपयोग करते हैं।

आप सटीक रूप से देखने के लिए पैडिंग और मार्जिन गुणों को समायोजित कर सकते हैं। संदर्भ के लिए

फिडल: http://jsfiddle.net/audetwebdesign/adW9Y/

नोट:
कोड भी अपने छवि का आकार व्यूपोर्ट के साथ पैमाने पर करने के लिए अनुमति देता है के लिए उधार देता है।

निम्नलिखित सीएसएस नियम जोड़ कर:

.autoSize { 
    width: inherit; 
} 
.autoSize img { 
    width: 25%; 
} 

और इस प्रकार मार्क-अप करने के लिए एक वर्ग को जोड़ने:

<li class="autoSize"> 
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
</li> 

के बाद से ul तत्व दृश्य पोर्ट की चौड़ाई के लिए विस्तारित, आप छवि को लपेटने वाले बच्चे li तत्व की चौड़ाई का उत्तराधिकारी बना सकते हैं। फिर आप छवि के लिए एक सापेक्ष चौड़ाई निर्धारित करते हैं (इस उदाहरण में 25%) और आपको लचीला/उत्तरदायी स्केलिंग मिलता है।