CSS居中边距：0自动，不起作用 [英] CSS centering margin:0 auto, not working

问题描述

我在 margin：0 auto上遇到问题； 我很确定解决方案很简单，但我做错了什么。这是我自己创建的第一个网站，但在以不同块为中心时遇到了一些问题。

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.

我遇到的第一个问题是内容不以其h2选择器类和文章类的父类为中心。 margin：0 auto; 没有执行任何操作。我在 content h2 中添加了 margin：0 auto; ，它开始起作用。因为我还不太了解它，所以我很难解释。我明白了：

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;
}

为什么第一个 margin：0自动为对于内容h2 不起作用？我也遇到了文章没有居中的问题，它们现在已经很正确地设置了，但是为什么没有居中？

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?

这是我完整的html代码整个身体

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>

以及我到目前为止的完整CSS

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; 
    }

推荐答案

首先，您不应该'在大多数情况下，不必指定width：auto，因为'width'属性默认为auto，请参见 http://www.w3.org/TR/CSS2/visudet.html#the-width-property 。换句话说，不管您是否指定它都没有区别。

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会将宽度设置为父块，而不是子块的宽度，即maincontent不知道如何设置宽度子文章块之外，因此您需要指定精确/最小宽度，以使页边距正常工作并使文章居中。如果将maincontent的宽度设置为 885px ，您会明白我的意思。

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.

至少可以在响应式设计中解决此问题的两种好方法。要么使用javascript根据文章块元素动态设置宽度，要么使用@media查询根据设备/浏览器的宽度设置宽度。

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.

<$ c内容的$ c> margin：0 auto 不适用于 content h2 或任何其他子元素，因为不继承css margin属性。参见 http://www.w3.org/TR/CSS2/propidx.html

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

这篇关于CSS居中边距：0自动，不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！