0

У меня проблема, при масштабировании сайта. Сайт смещается в левый угол а хотелось бы, что бы оставался в центре. Как это сделать? Вот код моей странички:

* {
    margin: 0;
    padding: 0;
}
@media (max-width: 990px) {
    img {max-width: 100%; height: auto;}
}
@media (max-width: 900px) {
    img {max-width: 100%; height: auto;}
}
@media (max-width: 820px) {
    img {max-width: 100%; height: auto;}
}
@media (max-width: 680px) {
    img {max-width: 100%; height: auto;}
}
@media (max-width: 506px) {
    img {max-width: 100%; height: auto;}
}
@media (max-width: 650px) {
    img {max-width: 100%; height: auto;}
}
html {
    width: 100%;
}
body {
    background: #000;
    max-width: 1262;
    padding: 0;
    margin: 0px auto;
}
header {
    text-align: center;
    padding: 0;
    margin: 0;
}
.leftimg {  
    margin-top: -325px;
    margin-left: -97px;
}
.rightimg {
    margin-top: -1192px;
    margin-left: 1047px;
}
.baza-01 {
    margin-left: 15px;
    padding: 0;
    margin-top: -830px;
}
.baza-02 {
    margin-left: 217px;
    padding: 0;
    margin-top: -204px;
}
.baza-03 {
    margin-left: 419px;
    padding: 0;
    margin-top: -204px;
}
.baza-04 {
    margin-left: 621px;
    padding: 0;
    margin-top: -204px;
}
.baza-05 {
    margin-left: 823px;
    margin-top: -204px;
    padding: 0;
}
/*content*/
img.animate3 {
    filter: alpha(Opacity=25); /* გამჭირვალობა IE-სათვის */
    opacity: 0.25; /* ნახევრადგამჭირვალობა სხვა მიმომხილველებისათვის */
    -moz-transition: all 1s ease-in-out; /* გადასვლის ეფექტი Firefox-ისათვის ვერსიამდე 16.0 */
    -webkit-transition: all 1s ease-in-out; /* გადასვლის ეფექტი Chrome ვერსიამდე 26.0, Safari, Android და iOS */
    -o-transition: all 1s ease-in-out; /* გადასვლის ეფექტი Opera-სთვის ვერსიამდე 12.10 */
    transition: all 1s ease-in-out; /* გადასვლის ეფექტი სხვა მიმომხილველებისათვის */
}
    img.animate3:hover {
    filter: alpha(Opacity=100); /* გამჭირვალობა IE-სთვის */
    opacity: 1; /* გამჭირვალობა სხვა მიმომხილველებისთვის */ 
}
.content {
    width: 1100px;
    max-width: 1045px;
    min-width: 1045px;
    margin-left: 110px;
    position: absolute;
}

Вопрос из ответа @Oleg

1
  • Некоторые замечания к стилям: на тег body лучше не вешать ничего связанного с размером окна, лучше создать отдельный класс внутри него, чтобы работать с ним и задавать нужные размеры. @media для одного и того же тега, причем свойства которого не меняются, лучше вынести в отдельный класс, либо сделать глобально 25 мар 2016 в 6:16

1 ответ 1

1

Вот мой пример, постоянно центрованного блока.

Суть в опциях для класса:

position: absolute;
margin: 0 auto;
left: 0;
right: 0;

Живой пример:

http://codepen.io/bustexz/pen/KzqPxL

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.