Dikey olarak bir hareket çubuğu merkezleme

Question

İçinde iki öğeye sahip bir başlık var. Birincisi, bir şirket logosu olan ve% 25 genişliğe ayarlanmış bir görüntüdür. Diğeri ise, öğelerinin yatay olması için satır içi olarak ayarlanmış bir nav çubuğudur. Gezinme çubuğunun dikey olarak merkezden ayarlanmasını istiyorum ama benim için hayatımı anlayamıyorum. Bildiğim her şeyi dikey hizalama kullanabilen ve uygulamak için ekran satır içi veya tablo hücresine yerleştirebilen bir öğeye ayarladım. Hiç birşey çalışmıyor.

Sadece statik yüzde doldurma ya da kenar boşluğu değeri vermememin nedeni, sayfa genişledikçe, genişliğin yaptığı gibi genişliğin büyüdüğü şekilde genişliğinin genişlemesiyle genişleyeceğinden dolayı, nav daha fazla hale gelir. ve daha fazla yer yok.

Sadece bir nesneyi dikey olarak ortalamak için denediğim (kabul edeceğimden çok daha uzun) herhangi bir yardımı çok takdir ediyorum.

HTML kesmek:

<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> 

CSS kesmek:

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: 

İşte basit jsFiddle: Orijinal keman http://jsfiddle.net/LbTCT/

Answer 1

Here's a fork.

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

yerine çalışırken float şeyler: Sen logosuna inline-block ve nav elemanı kendisi ayarı gerekmektedir.

Answer 2

Herşeyi satır içi blok olarak koymakla ilgili cevap doğrudur. Şamandıra, bu durumda belge akışı dışındaki öğeleri kırmak dışında sizin için hiçbir şey yapmıyor.

Example Fiddle

Ve alakalı CSS değişiklikleri burada:

Eğer eski tarayıcıları hedefliyorsanız Ancak, burada desteklemeyen olanlar için çalışması gerektiğini bir çözüm tablo hücreleri dışında dikey-hizalamak var

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

İşte, işaretlemenizde küçük bir değişiklik içeren, bunu yapmanın bir yolu. anahtar listesinin ilk <li> eleman logo resmi yerleştirmektir

#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; 
    } 

: gibi

<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> 

ve CSS görünüyor. Daha sonra listenin tüm öğelerini inline olarak görüntülersiniz ve onları hizalamak için vertical-align: middle kullanın.

İhtiyacınız olan tam görünümü elde etmek için dolgu ve kenar boşluğu özelliklerini ayarlayabilirsiniz. referans için

Fiddle: http://jsfiddle.net/audetwebdesign/adW9Y/

NOT:
kodu da görüntü boyutu görünüm ile büyütülebilir izin için çok uygundur.

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

ve aşağıdaki gibi mark-up bir sınıf ekleme: aşağıdaki CSS kuralı ekleyerek

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

ul elemanı görünüşüdür bağlantı genişliğine genleştiğinden, Genişliği, görüntüyü saran li elemanına devralabilirsiniz. Ardından görüntü için göreli bir genişlik ayarlarsınız (bu örnekte% 25) ve esnek/duyarlı ölçekleme elde edersiniz.