问题
I'm having a problem with margin:0 auto; I'm pretty sure the solution is simple but I'm just doing something wrong. This is my first website that I'm creating on my own, and I'm having some problems centering different blocks.
First problem I had with content not being centered its a parent of h2 selector class and article classes. The margin:0 auto; is not doing anything. I added margin:0 auto; to content h2 and it started to work. Its hard for me to explain it since I don't understand it fully yet. I got this:
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;
}
Why does the first margin:0 auto in the content not work for content h2? I'm also having problems with the articles not being centered they are pretty much properly set up now but are just not centered why is that?
Here is my full html code all of the body
<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>
and my full CSS so far
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;
}
回答1:
First of all you shouldn't have to specify width:auto in most cases because the 'width' property defaults to auto, see http://www.w3.org/TR/CSS2/visudet.html#the-width-property. In other words it makes no difference if you specify it or not.
From what I gather you are trying to center multiple child blocks (articles) in a full width element which will not work.
Width:auto will set the width to the parent block, not the width of the child blocks, i.e. maincontent doesn't know how to set the width off the child article blocks, so you need to specify an exact/min width in order for the margin to work correctly and center the articles. If you set the width of maincontent to 885px you will see what I mean by this.
There are at least two good ways you can resolve this in your responsive design. Either use javascript to dynamically set the width based of the article block elements, or use @media queries to set the width depending on the device/browser width.
margin:0 auto for content will not work for content h2 or any other child element because the css margin property is not inherited. see http://www.w3.org/TR/CSS2/propidx.html
回答2:
The element does not exists in html. You should change it for something like ''. However, if you want to use this non-existent element, maybe it works with a "display:block;"
来源：https://stackoverflow.com/questions/18708015/css-centering-margin0-auto-not-working