500% zoom: центр контента 3

Я хотел, чтобы мой левый правый контент был центрирован после увеличения на 500% плюс на веб-странице, я пробовал так много способов, но все равно не могу ответить, может кто-нибудь мне дать руку Здесь пожалуйста.500% zoom: центр контента 3

скопируйте и вставьте, чтобы создать новую веб-страницу, вы не можете видеть, вставляете ли вы на скрипке или в кодовую.

HTML:

<body> 
    <div id="lower_body"> 
     <h1>center content</h1> 
     <div id="outer_warpper"> 
      <div id="outer"> 
       <div id="left"><h1>left</h1></div>  
       <div id="right"><h1>right</h1></div> 
      </div> 
     </div> 
    </div> 
</body>

CSS:

#lower-body { 
    margin: 0px; 
    padding: 0px; 
} 
#outer_warpper { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding-top: 2%; 
    padding-bottom: 2%; 
    background-color: yellow; 
    overflow: hidden; 
} 
#outer { 
    background-color: black; 
    text-align: center; 
    vertical-align: middle; 
    display: table; 
    margin:0px auto; 
    overflow: hidden; 
} 
#right { 
    width: 450px; 
    height: 350px; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: red; 
} 
#left{ 
    width: 450px; 
    height: 350px; 
    display: inline-block; 
    vertical-align: middle; 
    background-color: grey; 
} 

img{ 
widht:100%; 
height:100%; 
} 

h1{ 
    text-align: center; 
}

, как вы можете видеть, когда он достигнет 500% (Ctrl + прокрутки мыши), левый и правый текст не в центре не больше, , потому что он как-то толкает налево.

можно мне помочь? Спасибо за помощь. Я пробовал ширину:% тоже не работает, кто-то говорит, что это нужно сделать в @media.

источник

2013-09-12 Christopher Lee

бы мы скопировать и вставить код на скрипку. ....... мы голодны, чтобы это сделать? –

jsfiddle можно использовать для этого ... просто добавьте '/ show' в конец скрипта url .. Вот [** скрипка **] (http://jsfiddle.net/Njqj9/show/). –

Спасибо, ребята, очень благодарны за помощь вашим ребятам^^ –

Это нормальное поведение ...

Ваши две дивы расположены относительно рядом друг с другом. Если они не могут соответствовать друг рядом с другом, то второй из них будет изменить себя под первой ...

, если вы действительно хотите, чтобы заставить его работать на 500% увеличении то, что вы можете сделать, это:

Измените размер дивы (example)
Используйте% ширины (example2)

Лично я бы с моей SECON d пример. Выбор, хотя это ваш (в зависимости всегда почему вам нужно для достижения этой цели)

PS: ширина% не работает, потому что вы использовали display:table; на #outer DIV

источник

2013-09-12 05:17:10 Thanos

спасибо за помощь, нет, я хотел, чтобы правый ящик был сдвинут вниз, мое намерение - сделать левое и правое увеличенное в центре, но все прекрасно работает, но однажды достигнуто 300 % -500%, это как толкать налево, вы можете левый правый текст больше не находится в центре. –

Это не проблема или даже ошибка, это обычное поведение браузера. Это просто слишком много, чтобы сохранить согласованность. Я думаю, что 400% в этом случае является максимальным. Если вы попробуете его в FireFox, вы не получите эту проблему, потому что он не будет работать до 500%.

Очень приятно беспокоиться о масштабировании веб-страницы, но 500% слишком велико для любой работы на странице.

источник

2013-09-12 04:54:55

500% zoom: центр контента 3

ответ

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