Search code examples
csshtmlindentation

How to indent a DIV?

I have a div center-aligned with its margin sets to 0 auto. Now I want to indent its left margin by 50 pixels from the middle. Whenever I try to do this, though, it aligns the div to the left side of its container and loses the center align. I think it's because it overrides the left field of the margin property. Does anyone know how to accomplish this? For clarification I want to indent it 50 additional pixels from the center of the container.

Solution

  • wrap it in another div. make the outer div margin: 0 auto; and the inner 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>