我遇到margin:0 auto;问题我很确定解决方案很简单，但我只是做错了。这是我自己创建的第一个网站，我在以不同的块为中心时遇到了一些问题。
我遇到的第一个问题是内容没有以h2选择器类和文章类的父级为中心。 margin:0 auto;没有做任何事情。我将margin:0 auto;添加到content h2，然后就开始工作了。我很难解释它，因为我还没有完全理解它。我明白了：
content {
width:auto;
max-width:1360px;
margin:0 auto;
}
content h2 {
width:auto;
max-width:900px;
margin:40px auto 0 auto;
text-align:center;
font-size:1.6em;
font-family:"Open Sans", sans-serif;
letter-spacing:0.2em;
color:#92908d;
line-height:40px;
font-weight:600;
}
为什么内容中的第一个margin:0 auto不适用于content h2？我也有问题，文章没有居中，他们现在几乎没有正确设置，但只是不集中为什么是这样？
这是我的全部html代码全部
<div class="blackbar"></div>
<header>
<section class="top">
<h1>stwórz swój własny antydot</h1>
<ul>
<li>
<img src="img/icons/home.png" alt="moje konto"/><a href="#">moje konto</a>
</li>
<li>
<img src="img/icons/register.png" alt="rejestracja"/><a href="#">rejestracja</a>
</li>
</ul>
</section>
<section class="banner">
<img src="img/banner/slide1.jpg">
</section>
<div class="blackbar2">
<section class="lowerbar">
<nav>
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">aktualności</a></li>
<li><a href="#">sklep</a></li>
<li><a href="#">kolekcje</a></li>
</ul>
</nav>
<div class="logo">
<img src="img/logo.png"/>
</div>
</section>
</header>
<content>
<h2>Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. vel est diam, vel fermentum eros. </h2>
<div class="seperator"></div>
<section class="maincontent">
<article class="left">
<h3>O nas</h3>
<img src="img/content/leftbw.jpg" alt="kołnierzyki">
<h4>InInteger elementum</h4>
<p>>massa at nullażżżż placerat varius. Suspendisse in libero risus, in interdum massa.</p>
<p>Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, </p>
<p>suscipit sed dictum quis, accumsan a ligula. reet volutpat molestie. </p>
<a href="#">Czytaj...</a>
</article>
<article class="mid">
<h3>wpisy</h3>
<img src="img/content/midbw.jpg" alt="blog">
<h4>Tytuł</h4>
<p>29/06/2013</p>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p>
<h4>Tytuł</h4>
<p>29/06/2013</p>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p>
<a href="#">czytaj...</a>
</article>
<article class="right">
<h3>kontakt</h3>
<img src="img/content/rightbw.jpg" alt="kontakt">
<form>
</form>
<ul>
<li><a href="#"><img src="img/content/iconfacebook.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/content/iconyoutube.png" alt="youtube"></a></li>
<li><a href="#"><img src="img/content/icontwitter.png" alt="twitter"></a></li>
<li><a href="#"><img src="img/content/icongoogle.png" alt="google"></a></li>
</ul>
</article>
</section>
</content>
<footer>
<p>Copyright © 2012 - <a href="#">Antydot.com</a> - All rights reserved</p>
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">aktualności</a></li>
<li><a href="#">sklep</a></li>
<li><a href="#">kolekcje</a></li>
</ul>
</footer>
<div class="footerbar"></div>
和我的完整CSS
a {
text-decoration: none;
color: inherit;
transition: color .5s ease;
}
body {
background:#f8f1ea;
font-family:"Open Sans", sans-serif;
color:#656565;
}
a:hover {
color: #b1473f;
}
.blackbar {
position:absolute;
z-index:-1;
width:100%;
height:50px;
background-color:#363636;
}
.top {
width:100%;
max-width:1360px;
margin:0 auto;
}
.top h1 {
float:left;
margin:5px 0 5px 20px;
font-family:"Open Sans", sans-serif;
font-size:18px;
color:#d1d0d0;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.1em;
}
.top ul li {
list-style-type:none;
display:inline-block;
float:right;
margin:5px 20px 5px 0;
position:relative;
text-transform:uppercase;
color:#d1d0d0;
letter-spacing:0.15em;
font-weight:500;
font-size:15px;
font-family:"Open Sans", Sans-Serif;
}
.top ul li img {
margin:0 15px 0 0;
}
.blackbar2{
position:relative;
max-width:2500px;
width:100%;
height:80px;
background-color:#1d1d1d;
}
.lowerbar {
width:100%;
max-width:1360px;
margin:0px auto 0 auto;
position:relative;
z-index:999;
}
.banner img {
width:100%;
}
.logo {
margin:0 0 5px 20px;
position:relative;
top:23px;
z-index:10;
}
nav ul {
list-style:none;
}
nav ul li {
display:block;
float:right;
padding:0 20px;
position:relative;
z-index:12;
top:23px;
color:#d1d0d0;
}
nav ul li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size:15px;
font-weight:500;
}
content {
width:auto;
max-width:1360px;
margin:0 auto;
}
content h2 {
width:auto;
max-width:900px;
margin:40px auto 0 auto;
text-align:center;
font-size:1.6em;
font-family:"Open Sans", sans-serif;
letter-spacing:0.2em;
color:#92908d;
line-height:40px;
font-weight:600;
}
.seperator {
height:1px;
background:#de564b;
max-width:900px;
margin:0 auto 0 auto;
border-bottom:1px solid #de564b;
position:relative;
top:40px;
}
.maincontent {
width:auto;
max-width:1360px;
margin:0 auto;
padding:70px 0 45px 0;
}
.maincontent article {
width:250px;
margin-right:45px;
float:left;
}
footer {
clear:both;
}
答案 0 :(得分：1)
首先，您不必在大多数情况下指定width：auto，因为'width'属性默认为auto，请参阅http://www.w3.org/TR/CSS2/visudet.html#the-width-property。换句话说，如果你指定它没有任何区别。
从我收集到的内容中，您试图将多个子块（文章）置于全宽元素中，这将无效。
宽度：自动将宽度设置为父块，而不是子块的宽度，即maincontent不知道如何设置子文章块的宽度，因此您需要指定精确/最小宽度为了使保证金正常工作并使文章居中。如果您将maincontent的宽度设置为885px，您将看到我的意思。
至少有两种很好的方法可以在响应式设计中解决这个问题。使用javascript根据文章块元素动态设置宽度，或使用@media查询根据设备/浏览器宽度设置宽度。
margin:0 auto内容不适用于content h2或任何其他子元素，因为不会继承css margin属性。见http://www.w3.org/TR/CSS2/propidx.html
答案 1 :(得分：0)
html中不存在该元素。你应该改变它''。但是，如果你想使用这个不存在的元素，它可能适用于“display：block;”