Сохранение содержимого по центру при масштабировании

У меня есть простой пример центрированного контента с использованием 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 или любым другим способом, если это возможно.

Update в @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 на Amazon, чтобы понять, что я имею в виду). Как правило, мы создаем сайты со 100% в виду. Если все ломается, когда пользователь использует масштаб браузера, то он на них. – MiniRagnarok

-1

Из моего опыта, незыблемый фикс для этого будет следующее:

.wrapperDiv { 
    text-align:center; 
} 

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

Используйте с осторожностью

источник

2013-07-19 20:01:40

Сохранение содержимого по центру при масштабировании

ответ

Смежные вопросы