Menu
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.
712
You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements. Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px.
Approach 1: Using the margin-left property: This property is used to add margin to the left of an element. It can be used to add the required indent by specifying the space needed in suitable length units or percentage. Example: This example uses the margin-left property to indent the whole block of text.
Technically, it is fine to either indent using the tab key or with the space bar. Indenting once with the tab key means just pressing the tab key once. Indenting once with the space bar means pressing the space bar 4 times.
To indent the first line of a paragraph, put your cursor at the beginning of the paragraph and press the tab key. When you press Enter to start the next paragraph, its first line will be indented.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
