% 100 navbar genişliğini korurken navbar görüntüyü ortalayın

Görüntüyü iki UL etiketi arasında ortalamaya çalışıyorum, ancak istediğim gibi çalışmıyor. Bu web sitesinden çeşitli kaynakları denedim ve özellikle bu sorunun cevabını bulamadım. Senin için o var% 100 navbar genişliğini korurken navbar görüntüyü ortalayın

* { 
 
    margin: 0; 
 
} 
 
body { 
 
    background-color: #FFD4DB; 
 
} 
 
#navbar { 
 
    height: 55px; 
 
    width: 80%; 
 
    top: 5px; 
 
    position: absolute; 
 
    left: 10%; 
 
    right: 10%; 
 
    border-radius: 2px; 
 
    color: #FF405E; 
 
    text-align: center; 
 
    border-bottom: 3px solid #9B5E68; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9baa+31,ffadae+93 */ 
 
    background: #ff9baa; 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #ff9baa 31%, #ffadae 93%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #ff9baa 31%, #ffadae 93%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #ff9baa 31%, #ffadae 93%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9baa', endColorstr='#ffadae', GradientType=0); 
 
    /* IE6-9 */ 
 
} 
 
#navbar > ul li { 
 
    list-style-type: none; 
 
    display: inline; 
 
    margin-left: 10px; 
 
} 
 
#navbar > ul > li > a { 
 
    text-decoration: none; 
 
    line-height: 55px; 
 
    color: #9B5E68; 
 
} 
 
#lgo { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<body> 
 
    <nav id="navbar"> 
 
    <ul> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
    </ul> 
 
    <img id="lgo" src="http://i.imgur.com/niYdlBv.png"> 
 
    <ul> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
    </ul>

kaynak

2016-03-21 TLOCanaan

kodunuzu yapıştırın lütfen. –

Şimdiye kadar ne denediniz? kodunuzu yapıştırın –

Özür dilerim, yazarken enter tuşuna yanlışlıkla basıp soruyu gönderdim. Her neyse, css'ye giden html ve js.fiddle gönderdim. – TLOCanaan

Tüm ul'lerin özniteliklerini ekledim.

#navbar ul { 
    display: inline-block; 
    position: relative; 
    padding: 0px 10px; 
}

Sonra HTML dosyasında bir miktar değiştirdim. Resmi oturur ortasında, hamur gidin:

<ul> 
    <img id="lgo" src="http://i.imgur.com/niYdlBv.png"> 
</ul>

Evet, şimdi #lgo bu ekleyin:

#lgo { 
    height: 55px; 
    vertical-align: middle; 
}

Umut sana yardımcı olabilir!

Here's the Pen!

kaynak

2016-03-21 20:02:56 callmeniko

Yorum için teşekkürler niko! https://jsfiddle.net/tt411ho6/3/ Tam olarak niyetimizi tam olarak yapmadığını buldum. Belirtildiği gibi yaptım ve nereye gittiğini anlıyorum. – TLOCanaan

Fena değil, kemanımı yeniden yükledim ve aynı sonuçları alkışladım. – TLOCanaan

Hatayı bulduğumuza sevindim! :) Şerefe – callmeniko

% 100 navbar genişliğini korurken navbar görüntüyü ortalayın

cevap

İlgili konular