Заголовок смещается при изменении страницы

Я создаю сайт с отзывчивым дизайном, чтобы он по-прежнему выглядел хорошо и хорошо менялся на разных устройствах.Заголовок смещается при изменении страницы

Все работает хорошо, кроме текста h1. У меня есть контейнер с фиксированной шириной 800 пикселей, который изменяется на ширину 100% при соответствующем размере экрана. Однако текст заголовка центрирован, когда размер экрана изменяется, а контейнер становится 100% шириной, теперь заголовок находится вне центра, слегка сдвинутый вправо.

Вот мой HTML:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
     <title>Home</title> 
    </head> 
    <body> 
     <div id="container"> 
      <h1>My Website!</h1> 
     </div> 
    </body> 
</html>

И мой CSS:

* { 
    font-family: Helvetica Neue; 
} 

body { 
    background-color: gray; 
    margin: 0; 
} 

h1 { 
    text-align: center; 
} 

#container { 
    width: 800px; 
    margin: 0 auto; 
    padding: 20px; 
    background-color: white; 
} 

/* Resizability (Responsive Web Design) */ 

@media screen and (max-width: 840px) { 

    #container { 
     width: 100%; 
    } 

}

Что происходит не так?

источник

2014-10-26 user2397282

Вы могли бы использовать что-то вроде этого Fiddle.

Добавить max-width: 100% и width: auto свойство, как:

CSS

@media screen and (max-width: 840px) { 

    #container { 
     max-width: 100%; 
     width: auto; 
     border: 1px solid red; /*only for demonstration */ 
    } 

}

источник

2014-10-26 14:51:35 pbaldauf

Я считаю, что это происходит из-за заполнения, которое вы применяете к своему container слева и справа. Пожалуйста, попробуйте этот CSS для отзывчивой части:

@media screen and (max-width: 840px) { 

    #container { 
     width: 100%; 
     padding: 20px 0px; 
    } 

}

источник

2014-10-26 14:48:44

демо - http://jsfiddle.net/victor_007/6d8296ag/2/

этот вопрос из-за paddingwidth был был добавлен 100%, а также обивка таким образом, общая width увеличена до 100% + padding с использованием box-sizing:border-box который дает padding/border внутри

в вас скрипку был горизонтальный скроллер, с помощью которого был из-за padding и width

для адаптивного дизайна с использованием box-sizing:border-box важно

* { 
    font-family: Helvetica Neue; 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

источник

2014-10-26 14:50:25

Заголовок смещается при изменении страницы

ответ

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