Question

为什么我的“部分”中心不正确？

我认为应该这样做：

section{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

这次出了什么问题？

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<title>LifeSymb.com</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<section>
    <article id="intro" class="scrollBlock">
            <h1>HOMES on the WEB</h1>

            <p>WHats going on, somekinda test text
            Likely to go and whats going to happen, hoihfedfh
            Fancy scrolling is going to Happen !!!</p>
    </article>
    <article id="slide2" class="scrollBlock">
            <h2>SLIDE 2</h2>

            <a href="http://google.com" id="photoSlide2"><img src="images/block2.png" alt="" /></a>
            <p>Text TUTYUYIUYOIUOIUiihjihiohiuhiuhuhuhuohoiuhoiyuoiuy</p>
            <p class="btn"><a href="http://google.com">Vist HERE!!!</a></p>
    </article>
    <article id="dog" class="scrollBlock">
            <h2>My dog has his own website</h2>

            <p>That's right! My dog Dog has his very own website full of cute doggy photos right from being a pup.<br/>
            <strong>Check out Jake's website at <a href="http://google.com">http://google.com</a></strong></p>
    </article>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/libs/jquery.scrollorama.js"></script>
<script src="scripts/scrollScript.js"></script>
</body>
</html>

CSS：

body{
    font: 18px/30px Sans-serif;
    color: black;
    background:url('../images/bodyBG.png');
}

section{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.scrollBlock{
    width: 70%;
}

#intro{
    background: lightgreen url(../images/dragon.jpg) left no-repeat;
    /*background-size: cover;*/
}

    #intro h1{
        width: 677px; height: 122px;
        background: url(../images/btn_intro.png);
        text-indent: -9999px;
        position: relative;
        top: 145px;
        left: 0;
    }
    #intro p{
        position: relative;
        top: 200px;
        left: 350px;
        width: 508px;
        margin: 0 0 30px 0;
    }
    #intro p:nth-child(2){
        font-weight: bold;
    }


#slide2{
    background: lightpink url(../images/texture_purple.png);
}


#dog{
    background: black url(../images/dog.jpg)no-repeat;
    background-size: cover;
    padding-top: 400px;
}
    #dog h2{
        opacity: 0;
    }

Answer 1

将此添加到CSS：

section article {margin: 0 auto;}

这意味着“将0垂直边距和auto水平边距应用于article”的每个section。（JSFiddle）

您的article小于section的宽度，因此您也必须将article居中对齐。

Answer 2

尝试将“width：100％”添加到<body>元素。

中心部分？

2 个答案: