100％navbarの幅を維持しながら、ナビゲーションバーの画像を中央に配置

イメージを2つのULタグの中央に配置しようとしていますが、機能しません。私はこのウェブサイトからさまざまな情報源を試しましたが、私はこの1つの問題に対する答えで特に見つけることができません。100％navbarの幅を維持しながら、ナビゲーションバーの画像を中央に配置

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

出典

2016-03-21 TLOCanaan

貼付してください。 –

これまでに何を試しましたか？あなたのコードを貼り付けてください –

私の謝罪、私は間違って入力中にエンターキーを押して、それは質問を提出した。とにかく、私はCSSにつながるhtmlとjs.fiddleを投稿しました。 – TLOCanaan

私はあなたのためにそれを持って！

すべてのulに属性を追加しました。

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

次に、HTMLファイルを少し変更しました。

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

うん、今#lgoにこれを追加します：画像が貼り付けを行って、座っている途中で

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

は、私はあなたを助けることができる願っています！

Here's the Pen!

出典

2016-03-21 20:02:56 callmeniko

コメントありがとうございました！ https://jsfiddle.net/tt411ho6/3/私はそれが私たちが意図していたものとまったく同じではないことを発見しました。私は述べたようにして、どこに行くのか理解しています。 – TLOCanaan

悪いことに、私はフィドルをリロードし、同じ結果を得ました。 – TLOCanaan

私たちは間違いを見つけてうれしいです！ :)歓声 – callmeniko

100％navbarの幅を維持しながら、ナビゲーションバーの画像を中央に配置

答えて

関連する問題