Как работать вместе "margin: auto" и "margin-left: offset"?

У меня есть контейнер на тестовом сайте:

#container {
  margin: 0 auto;
}

Затем я добавил левое вертикальное меню и на некоторых небольших экранах это меню не полностью видно.
Как и мой старый ноутбук: -)

Я хочу сохранить настройку margin:auto, но я хочу немного переместить целое число #container вправо.

Может ли это быть каким-то образом?

Я пробовал #container {margin-left:10px;}, но безрезультатно.

Ответ 1

Играя с firebug, полезно использовать:

#container {
 margin: 0 auto;
 position:relative;
 left:10px;
}

Надеюсь, он решает...

Ответ 2

Самый простой подход - ввести другой элемент (или создать другой элемент, если он уже доступен). Таким образом, вы можете:

<div style="margin-left: 10px;">
   <div id="container" style="margin: auto;">...</div>
</div>

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

Ответ 3

Если вы завернете div #container в другой div с удвоенным левым полем, это будет работать.

  #wrap {
    margin-left: 20px;
  }
  .centre { /* this would be your #container */
    width: 100px;
    height: 40px;
    margin: auto;
    background-color: #f00;
  }
  #wrap .centre {
    background-color: #00f;
  }

HTML:

  <div class="centre"></div>
  <div id="wrap">
    <div class="centre"></div>
  </div>

http://jsbin.com/emogu3