Как оставить выравнивание заголовка с помощью CSS

Question

Я разрабатываю тему на своем веб-сайте с помощью Thesis 2. Я только что изменил классическую отзывчивую тему.

Я создал идентификатор, используя тег div, называемый «header-middle-sub». И вот код, который я использовал:

#header-middle-sub { 
    background-color: #6699CC; 
    display: table; 
    margin: 0 auto; 
    width: 897px; 
} 

Он отлично работает в браузере, используя рабочий стол. Но поскольку это отзывчивая тема, когда я открываю сайт в планшете или мобильном телефоне, ширина занимает фиксированный 897 пикселей.

Если я удаляю эту строку width: 897px;, название будет центрировано на экране. Итак, каков код для сохранения позиции названия?

BTW, вот мой сайт http://bit.ly/1cuTmtE.

Update:

Может кто-нибудь, пожалуйста, посетите мой сайт и использовать «инспектировать элемент» из хрома или светлячок?

Вот CSS моего раздела заголовка:

.header { 
    margin: 0 auto; 
    padding: 0px; 
    background-color: #C4C4C4; 
} 

#header-top { 
    background-color: #7ED7F2; 
} 

#header-middle { 
    background-color: #6699CC; 
    border-bottom: 5px solid #0f3158; 
    border-top: 2px solid #0F3158; 
    padding: 20px 0 20px 0; 
} 

#header-middle-sub { 
    background-color: #6699CC; 
    display: table; 
    margin: 0 auto; 
    width: 897px; 
} 

#header-bottom { 
    background-color: #0099CC; 
} 

#header-container { 
    display: table; 
    margin: 0 auto; 
} 

Вот раскладка на мою тему, используя тезис 2.

Answer 1

это не работает на рабочем столе тоже! Сделайте окно браузера очень мал, и вы будет видеть горизонтальную полосу прокрутки. Ширина составляет всегда исправлено.

Чтобы избежать этого поведение, используйте следующий код CSS:

#header-middle-sub { 
    background-color: #6699CC; 
    display: table; 
    margin: 0 auto; 
    max-width: 897px; 
    width: 100%; 
} 

Теперь он всегда будет пытаться растянуть div по всему окну браузера, но max-width ограничивает его 897px, но менее является возможно и менее будет использоваться на мобильных телефонах или при изменении размера вашего окна браузера.

Answer 2

float: left; 

читать об этом здесь:

http://www.w3schools.com/css/css_float.asp

Answer 3

Попытайтесь использовать свойство float: float:left;

Answer 4

Вы должны использовать медиа-запросы, чтобы изменить ширину контейнера на основе разрешения. И кстати. Проблема в том, что margin: 0 auto означает: «Получите мою текущую ширину и поместите меня в центр с равными полями слева и справа. Итак, если вы хотите использовать маржу, вам нужны медиа-запросы для динамического изменения содержимого контейнера ширина.

Answer 5

свойство text-align: left будет работать для этого, но все равно это будет ясно после того, как некоторые подробности о проблеме или огурчик