center text in top bar with logo on left - html

Question

i've created a simple topbar with text centered. My question is then how can i place a text logo in the left side with the text still appearing in the center of the navigation bar and still being responsive?
css:
nav {
position: absolute;
top: 0;
width: 100%;
height: 40px;
background: #000;
opacity: 1.0;
text-align: center;
}
nav li {
display: inline-block;
padding: 10px 10px;
}
nav li a {
color: #757575;
text-transform: uppercase;
}
#media only screen and (max-width: 520px) {
nav li {
padding: 10px 4px;
}
nav li a {
font-size: 14px;
}
}
html:
<section id="screen1">
<p>Scroll down</p>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</section>

Answer 1

#user3646311, the CSS style that will accomplish having an image, text or any other element on the left while still centering the text is float: left;. When you float an element you are telling it to go to one side and not effect the other elements that it may be touching. It is also important that you set the parent element with position: relative; which will tell the floating child to not go outside the bounds of the parent. You can read a lot more about floats on css-tricks. I wrote a working example for you to play with at jsfiddle.net.
HTML
<nav>
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" />
<span>Text Logo</span>
<ul>
<li>Home</li>
</ul>
</nav>
CSS
nav {
position: relative;
}
/* This is how to float an image */
nav img {
float: left;
max-height: 50px;
}
/* This is how to float text */
nav span {
color: #FFF;
float: left;
line-height: 3em; /* Use line-height to vertically position your text */
}