放大的浮動元素和文本不居中

Question

移動應用程序的原因我有一個具有響應性設計問題相當簡單的網頁。它有一個浮動的標題欄，佔據了身體寬度的100％（手機上的整個屏幕）

它內部的文字應該是居中的文字<h1>，裏面有一個居中的文字和一個「漢堡包」 nav旁邊。

要做到這一點我用的導航絕對定位，並在標題欄的固定位置（這樣它會向下滾動時留在上面）。然而，當用戶放大，一切都那麼文本撞到漢堡NAV（本質上只是一個div與背景圖像，因爲從絕對定位流刪除），也得到得到比屏幕大變得更大。我怎樣才能防止這一點？

HTML

<section class="main firster" id="homeSection"> 

      <nav id="homeNav"> 

       <div class="menuIcon" id="menuIcon"></div> 

       <ul id="navUl"> 
        <li class="mobileShow"><a href="index.html" class="mobileShow">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="sleep.html">Sleep</a></li> 
        <li><a href="dine.html">Dine</a></li> 
        <li class="current"><div id="tm">Tierra Magnifica</div></li> 
        <li><a href="relax.html">Relax</a></li> 
        <li><a href="play.html">Play</a></li> 
        <li class="lastList"><a href="party.html">Party</a></li> 
        <li class="contactButton largeHide realContact">Contact Us</li> 
        <li class="navImage largeHide"><img src="media/navMenu.png"></li> 
       </ul> 

      </nav> 

     <div class="tierraDiv about noNav" id="mobileFlag"><p>Tierra <br>Magnifica</p></div> 
    </section> 

CSS

.menuIcon { 
    display: inline-block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 2.2em; 
    height: 2.2em; 
    margin: .2em .2em 0 .4em; 
    background: url('../media/nav.png') center; 
    border: .15em solid #757170; 
    -webkit-border-radius: .4em; 
      border-radius: .4em; 
} 

nav { 
    z-index: 30; 
    position: fixed; 
    text-align: center; 
} 

nav ul, .mobileNotClicked, nav:hover ul.mobileNotClicked { 
    z-index: 20; 
    display: none; 
    position: fixed; 
    background-color: #FBF7EE; 
    left: 0; 
    margin: 0; 
    top: 2.6em; 
    width: 14em; 
} 

nav:hover ul, .mobileClicked { 
    display: block; 
    border-top: .45em solid #9AD5E6; 
} 

ul #navUl { 
    padding: 0; 
} 

#navUl li { 
    text-transform: uppercase; 
} 

nav li { 
    list-style-type: none; 
    width: 9em; 
    padding: .6em 0; 
    margin: 0 auto; 
    border-bottom: 1px solid #757170; 
    font-family: "PlantinMTStd-Light"; 
} 

nav li.lastList { 
    border: none; 
} 

nav li.navImage { 
    width: 100%; 
    border: none; 
} 

nav li.contactButton { 
    margin-top: .3em; 
    width: 9em; 
    background: #FBF7EE; 
    border: .25em solid #757170; 
    font-family: "Gothamer"; 
} 



.menuIcon { 
    display: inline-block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 2.2em; 
    height: 2.2em; 
    margin: .2em .2em 0 .4em; 
    background: url('../media/nav.png') center; 
    border: .15em solid #757170; 
    -webkit-border-radius: .4em; 
      border-radius: .4em; 
} 

這些圖片來說明這個問題（雖然你看不到屏幕上的文本滾動這裏）：

Answer 1

你必須設置.tierraDiv固定寬度（150像素的），並與margin: 0 auto居中.tierraDiv。 「自動」將在頁面中間水平放置150px寬的.tierraDiv。

在.tierraDiv中，您必須設置p「text-align：center」，以便將段落（或h1）置於150px內。

現在放大後，您的導航圖標仍會碰到.tierraDiv，但左側有足夠的空間（150像素），因此沒有視覺問題了。

這裏IST的代碼，你必須添加到您的CSS提供在這裏：

.tierraDiv { 
    width: 150px; 
    margin: 0 auto; 
} 

.tierraDiv p { 
    text-align: center; 
}