Zentrieren eines Bildes in Navbar bei Beibehaltung der Breite der Navigationsleiste 100%

Ich versuche, mein Bild zwischen zwei UL-Tags zu zentrieren, aber es funktioniert nicht so, wie ich es möchte. Ich habe verschiedene Quellen von dieser Website ausprobiert und kann keine speziell mit der Antwort auf dieses eine Problem finden.Zentrieren eines Bildes in Navbar bei Beibehaltung der Breite der Navigationsleiste 100%

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

Quelle

2016-03-21 TLOCanaan

einfügen Sie bitte Code. –

Was hast du bisher versucht? füge deinen Code ein –

Entschuldigung, ich habe beim Eintippen versehentlich die Eingabetaste gedrückt und die Frage gestellt. Wie auch immer, ich postete die HTML und Js.Fiddle, die zum CSS führen. – TLOCanaan

ich für Sie den!

Ich habe Attribute für alle uls hinzugefügt.

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

Dann habe ich ein bisschen in der HTML-Datei geändert. In der Mitte, wo das Bild sitzt, gehen Paste:

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

Yep, fügen Sie diese nun auf die #lgo:

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

Hoffe, dass ich Ihnen helfen könnte!

Here's the Pen!

Quelle

2016-03-21 20:02:56 callmeniko

Danke für den Kommentar Niko! https://jsfiddle.net/tt411ho6/3/ Ich fand, dass es nicht genau das tat, was wir vorhatten. Ich tat wie gesagt und ich verstehe, wohin du gehst. – TLOCanaan

Nicht schlecht, habe ich meine Geige neu geladen und bekam die gleichen Ergebnisse Prost. – TLOCanaan

Ich bin froh, dass wir den Fehler gefunden haben! :) Prost – callmeniko

Zentrieren eines Bildes in Navbar bei Beibehaltung der Breite der Navigationsleiste 100%

Antwort

Verwandte Themen