Как совместить «margin: auto» и «margin-left: offset»?

Question

У меня есть контейнер на моем испытательном полигоне :

#container {
  margin: 0 auto;
}

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

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

Можно ли это как-нибудь сделать?

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

Answer 1

Играя с Firebug, хорошо использовать:

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

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

Answer 2

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

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

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

Answer 3

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

  #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