एक चहचहाना बूटस्ट्रैप नेवबार

Question

यहाँ मेरी लाइव साइट है में एक छवि केंद्रित: http://ancient-badlands-4040.herokuapp.com/

मैं मेरी छवि को केंद्रित करने के लिए कोशिश कर रहा हूँ और यह भी लिंक छवि के साथ लंबवत संरेखित है।

मैं अब तक इस पद Twitter Bootstrap - centering brand logo in navbar

मैंने पहले मेरी "ब्रांड" वर्ग का समायोजन करके मेरी छवि केंद्रित सफल रहा था पढ़ने के बाद इस काम में सहायता का एक बहुत मिल गया (मैं 28% करने के लिए चौड़ाई सेट)। दुर्भाग्यवश, चौड़ाई को समायोजित करने के बाद, मैंने अपने लोगो की स्थिति को बदलकर "navbar" वर्ग की चौड़ाई को समायोजित करना पड़ा।

मैंने अपना कोड नीचे दिए गए में बदल दिया है, मैं अपनी छवि को केन्द्रित करने की कोशिश कर रहा हूं और लिंक को मेरी केंद्र छवि के साथ समान रूप से लाइन अप करना है।

किसी भी मदद की सराहना की जाएगी, धन्यवाद! :)

HTML: ** अपडेट किया गया divs और उल कक्षाएं

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner "> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav pull-right"> 
      <li><a>CODEY</a> 
      </li> 
      <li> <a>CODEY</a></li> 
     </ul> 

     <ul class="nav pull-left"> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      </ul> 

      <a class="brand"></a> 
      <%= image_tag 'ctclogonewnobg.png', alt: 'logo' %> 

     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 

सीएसएस:

$navbarLinkColor: #90fce8; 
$navbarBackground: #ff3600; 
$navbarBackgroundHighlight: #ff3600; 
$navbarText: Archivo Black, sans-serif; 
@import url(http://fonts.googleapis.com/css?family=Archivo+Black); 


@import 'bootstrap'; 

body { 

    background: url('escheresque_@2X.png'); 
} 


@import 'bootstrap-responsive'; 

.navbar-inner { 
    @include box-shadow(none !important); 
    border: 0; 
    width: 100%%; 
    margin: auto; 
} 



.navbar .brand { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20px; 
    float: none; 

} 

Answer 1

यहाँ एक CodePen में आप के लिए कुछ उदाहरण हैं - मूल रूप से पहले http://codepen.io/michaellee/pen/nLmJa

उदाहरण प्रदर्शन का उपयोग करता है: इनलाइन-ब्लॉक; एक पंक्ति और लंबवत-संरेखण में सबकुछ संरेखित करने के लिए: मध्य; ब्लॉक

दूसरा उदाहरण आपके जैसा है जहां आप नेविगेशन को बाएं और दाएं तरफ तैर सकते हैं और लंबवत, केंद्रित दिखने और महसूस करने के लिए पैडिंग का उपयोग कर सकते हैं।

एचटीएमएल

<header> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 
<br /> 
<header class="second"> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 

सीएसएस

header{ 
    width: 100%; 
    text-align: center; 
    background: #e63100; 
    display:block; 
    overflow: hidden; 
} 
ul{ 
    list-style: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    li{ 
    display: inline-block; 
    } 
} 

.logo{ 
    font-size: 30px; 
    vertical-align: middle; 
    margin: 0 40px; 
} 

.second{ 
    .nav-left{ 
    float: left; 
    } 
    ul{ 
    padding: 30px 0; 
    } 
    .nav-right{ 
    float: right; 
    } 
    .logo{ 
    padding: 20px 0; 
    display: inline-block; 
    } 
}