Zentrieren Navigationsleiste in der Kopfzeile mit Logo

Question

Auf der Suche nach ein wenig Hilfe mit einem Projekt, versuche ich eine Navigationsleiste in einer Kopfzeile mit einem Logo auf der linken Seite zentriert zu bekommen.

HTML

<header> 
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" /> 
    <div id="nav"> 
    <span><a href="#">Home</a></span> 
    <span><a href="#"><button>Televeisions</button></a></span> 
    <span><a href="#">Electronics</a></span> 
    <span><a href="#">Services</a></span> 
    </div> 
</header> 

CSS

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
} 

#nav { 
    width: 100%; 
    text-align: center; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 
} 

JSFiddle

Answer 1

Ihre nav Breite 100% unter dem Bild, um das nav zwingt. Ich habe einen Überlauf hinzugefügt: versteckt in der Kopfzeile, flotierte den IMG nach links und legte einen Rand auf die #Nav.

Passen Sie Ihre CSS etwas wie folgt aus:

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    overflow: hidden; 
} 
img { 
    float: left; 
} 
#nav { 
    width: 600px; 
    text-align: center; 
    margin-top: 2.5em; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 
} 

Sie den Rand anpassen usw. zu Stil, wie Sie von dort aus wollen.

Codepen: http://codepen.io/Tambe257/pen/XdGdLZ

Answer 2

Verwenden Positionierung auf dem Mutterelement und Ihr Kind-Elemente, die im Inneren verschachtelt werden. Hier ist ein schnelles Beispiel

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    position:relative; 
} 

#nav { 
    width: 100%; 
    text-align: center; 
top:2em; 
position:absolute; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 

}