頂部欄中有左側徽標的中心文本

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 */ 
}