why doesn't margin work?
I'm just starting to learn how to work with sites, I'm faced with the problem of centering the site itself in the center , I watch different videos , everything works on the video, but I don't.
body{
background: url(img/BG.jpg) no-repeat 100%;
font-family: Arial, Tahoma, Sans-serif;
padding: 40px 0;
}
.wrapper{
width: 960px;
margin: 0 auto;
}
The text is not aligned, but is still oriented along the upper-left edge - why?
Can someone tell me how to immediately set the width and center alignment of the site in %
I look forward to help, and I would love to learn from someone!
3 answers
Add a pointer center, try this way:
body{
text-align:center;
background: url(img/BG.jpg) no-repeat 100% center;
font-family: Arial, Tahoma, Sans-serif;
padding: 40px 0;
}
The block in the center, for example:
.wrapper{
width: 960px;
margin-left: -480px;
left: 50%;
position: absolute;
}
A more detailed version about text-align by Dmitry Kulevich
Your .wrapper, 99.9% sure is div элементом. Div - this is a block element, the block element has the property of stretching to the full width of the parent, in your case, it is most likely body, since html and body are stretched to the full width of the monitor screen by default, then your wrapper is also stretched to the full width. This can be easily verified by asking your question .wrap the border border: 1px solid #000 and you will see how it is stretched...Let's move on, the text in the block elements is centered on the left by default, which is what you see. If you want the text to be in the middle of a block element, you need to "tell" it to it text-align: center