中心部分？

爲什麼我的「部分」不能正確居中？中心部分？

我想這應該這樣做：

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

來源

2014-01-29 xoxo_tw

'width：80％; margin0 auto;'.... :) – NoobEditor

您使用的是什麼瀏覽器/版本？還是所有瀏覽器都一樣？ – Spudley

它添加到CSS：

section article {margin: 0 auto;}

這意味着「應用0垂直邊距和auto水平邊距每article這是一個section的孩子」。（JSFiddle）

您的article s小於section的寬度，因此您必須也將中心對齊article s。

來源

2014-01-29 14:34:43

謝謝你好好的探索^ _ ^ –

嘗試添加「寬度：100％」來<body>元素。

來源

2014-01-29 14:33:37 Jentel

回答

相關問題