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 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
padding-left: 50px;
and if that doesn't suffice keep the padding and ad another div inside the bigger one.
Wrap another div around your div. Then center align the new div and then margin left or padding left your original div.
加载中,请稍侯......
精彩评论