2

我有一个问题,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; 
    }
4

2 回答 2

1

首先,在大多数情况下,您不必指定宽度:自动,因为“宽度”属性默认为自动,请参阅http://www.w3.org/TR/CSS2/visudet.html#the-width-property . 换句话说,无论您是否指定它都没有区别。

据我所知,您正试图将多个子块(文章)集中在一个全宽元素中,这是行不通的。

Width:auto 会将宽度设置为父块,而不是子块的宽度,即 maincontent 不知道如何设置子文章块的宽度,因此您需要指定精确/最小宽度以便边距正常工作并使文章居中。如果你将 maincontent 的宽度设置为885px你会明白我的意思。

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

margin:0 autofor content 不适用于content h2或任何其他子元素,因为没有继承 css 边距属性。见http://www.w3.org/TR/CSS2/propidx.html

于 2013-09-10T00:35:17.447 回答
0

该元素在 html 中不存在。您应该将其更改为“”。但是,如果您想使用这个不存在的元素,也许它可以与“display:block;”一起使用。

于 2013-09-09T22:39:30.893 回答