How to indent a DIV?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-18 11:41 出处：网络

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

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 overrid开发者_如何学Ces 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.

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>

<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>

try