如何當CSS3縮小窗口爲中心內容

這裏是我的導航代碼：如何當CSS3縮小窗口爲中心內容

<div class="wrapper"> 
     <header> 
      <nav class="nav"> 
       <ul> 
        <li><a href="#">HOME</a></li> 
        <li><a href="#">COMPANY</a></li> 
        <li><a href="#">MARKETS/SOLUTIONS</a></li> 
        <li><a href="#">PRODUCTS/SERVICES</a></li> 
        <li><a href="#">BUSINESSES</a></li> 
        <li><a href="#">INVESTORS</a></li> 
       </ul> 
      </nav> 
      </header> 
      </div>

CSS3：

*{ 
    box-sizing:border-box; 
} 
body{ 
    margin:0; 
    padding:0; 
    font-family:Verdana; 
    font-size:12px; 
} 
.wrapper{ 
    margin-left:auto; 
    margin-right:auto; 
} 
nav ul{ 
    background-color: red; 

} 
nav ul li{ 
    display:inline-block; 
    padding:15px; 

} 
nav ul li a{ 
    text-decoration: none; 
    color: #FFFFFF; 
} 
nav ul li:first-child:hover{ 
    text-decoration: underline; 
    background-color:none; 
} 
nav ul li:hover{ 
    background-color:#000; 
}

的jsfiddle：

http://jsfiddle.net/ubz7Lcft/6/

我需要像這樣當正常窗口：http://imgur.com/dUCP3VM，我需要這樣的時候sh冰場窗口http://imgur.com/lhlY1XC

Plase幫我解決這個問題，我已經嘗試了所有可能的方式..

在此先感謝。

來源

2014-09-10 sasi

我不完全相信你的要求，並補充說：

text-align: center;

到.wrapper得到你想要的？

編輯：爲了限制這種把屏幕爲700像素或更寬，例如案例：

@media (min-width: 700px) { 
    .wrapper { 
     text-align: center; 
    } 
}

來源

2014-09-10 14:44:29

而且我不希望文本對齊：中心;因爲在正常窗口中的內容應顯示在左側。 – sasi 2014-09-10 14:47:35

那麼什麼定義了什麼時候你想從左對齊改爲中心？聽起來像你可能希望看起來像CSS媒體查詢***像@ media（max-width：600px）{...}' – 2014-09-10 14:50:21

.wrapper應該是全寬..不使用960px – sasi 2014-09-10 14:52:57

如何當CSS3縮小窗口爲中心內容

回答

相關問題