Как отступать DIV?

У меня есть div с выравниванием по центру с его наборами полей на 0 auto. Теперь я хочу отложить левое поле на 50 пикселей от середины. Однако, когда я пытаюсь это сделать, он выравнивает div с левой стороны контейнера и теряет выравнивание по центру. Я думаю, потому что он переопределяет левое поле свойства margin. Кто-нибудь знает, как это сделать? Для уточнения я хочу отложить это 50 дополнительных пикселей от центра контейнера.

Ответ 1

оберните это в другом div. сделать внешний div margin: 0 auto; и внутренний div margin-left: 50px

.outer {
  width: 200px;
  margin: 0 auto;
  background-color: yellow;
}

.inner {
  margin-left: 50px;
  background-color: orange;
}

<div class="outer">
  <div class="inner">
    hello world
  </div>
</div>

Ответ 2

<html>
<head>
    <title>Test</title>
    <style>
        #outer {
            margin: 0 auto; /*center*/
            width:200px;
            background-color:red; /*just to display the example*/
        }

        #inner {
            /*move the whole container 50px to the left side*/
            margin-left:-50px; 
            margin-right:50px;
            /*or move the whole container 50px to the right side*/
            /*
            margin-left:50px; 
            margin-right:-50px;
            */
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        This is the result!
    </div>
</div>
</body>
</html>

Ответ 3

попробовать

padding-left: 50px;

и если этого недостаточно, сохраните дополнение и объявление другого div внутри большего.

Ответ 4

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