縮放時保持內容居中

我有一個使用HTML和CSS居中內容的簡單示例（jsfiddle）。該截圖如下：縮放時保持內容居中

Unzoomed content

HTML：

<body class="" lang="en-US"> 
    <div class="wrapper"> 
     Some stuff 
    </div> 
</body>

CSS：

html 
{ 
    background: lightgray; /* Background color of whole window */ 
    border: 2px solid orange; /* Debug */ 
    width: 20em; /* The width of the content */ 
    margin: 2em auto; 
} 

body 
{ 
    border: 2px solid purple; 
} 

.wrapper 
{ 
    background: lightgray; /* Background color of whole window */ 
    border: 2px solid orange; /* Debug */ 
}

當我在使用瀏覽器縮放放大，內容停留在左手側你放大：

Zoomed Content

我想什麼都發生在窗口中間的內容說，你放大：

Desired zoom result

是否有一個簡單的方法來做到這一點使用CSS。如果可能的話，我不想使用jquery或任何其他方式。

更新作爲@Mr李斯特指出，this "problem" has nothing top do with zoom. The very same thing happens if the user makes the window narrower until the horizontal scrollbar appears. Are you saying you want the scrollbar to automatically go to the center then too? That would require Javascript

我不認爲我想這一點。看起來用戶體驗可能有點奇怪。我不想強迫它始終處於中心位置，不允許它們移動到頁面的其他部分。只需在水平滾動條第一次出現時和後續縮放時保持居中。如果用戶在放大滾動條的同時更改滾動條的位置，則在後續縮放時不需要重新調整位置。這僅僅是最初的滾動條顯示。希望這是有道理的。它的「對與錯」是否可以辯論，但這是我的願望。讓我知道如果你需要進一步澄清

來源

2013-07-19 SwDevMan81

您使用的瀏覽器特定縮放或CSS屬性？瀏覽器縮放對於每個瀏覽器完全不同。如果沒有JavaScript，你將無法彌補它。 – MiniRagnarok

@MiniRagnarok - 我使用的是特定於瀏覽器的縮放（在Chrome瀏覽器中是這樣說的，就像「Zoom 125％」一樣）。 – SwDevMan81

互聯網上的一些最大的網站無法使用瀏覽器縮放功能（請嘗試在亞馬遜的Chrome上查看我的意思）。一般來說，我們創建100％的網站。如果用戶使用瀏覽器縮放時一切都中斷，那麼它就在他們身上。 – MiniRagnarok

-1

從我的經驗，一個堅如磐石的修爲，這將是以下幾點：

.wrapperDiv { 
    text-align:center; 
} 

.centeredDiv { 
    width: /*define yours*/ px; 
    display:inline-block; 
}

使用謹慎

來源

2013-07-19 20:01:40

縮放時保持內容居中

回答

相關問題