顶部栏中有左侧徽标的中心文本

Question

我已创建了一个以文本为中心的简单顶栏。我的问题是，如何在左侧放置文本徽标，文本仍然出现在导航栏的中央，并且仍然有响应？

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><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 

</section> 

Answer 1

@ user3646311，CSS样式，将完成其上的图像，文本或任何其它元件上离开，同时仍然居中文字float: left; 。当你浮动一个元素时，你会告诉它去到一边，而不会影响它可能触及的其他元素。同样重要的是，你设置父元素position: relative;这将告诉浮动子不会超出父界限。你可以在css-tricks上看到更多关于漂浮物的信息。我为你写了一个工作例子，在jsfiddle.net上玩。

HTML

<nav> 
    <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" /> 
    <span>Text Logo</span> 

    <ul> 
     <li><a href="#">Home</a></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 */ 
}