2013-01-24 23 views
2

我正在製作單頁網站。對於「較低」頁面,我有圖像作爲我的標題。我可以在使用以圖像爲中心,如何將其向下移動?

img 
{ 
display:block 
margin-left:auto 
margin-right:auto 
width:400px 
} 

但是到中心的形象,我要求它是一個低一點。我嘗試添加邊距頂部,但似乎爲整個頁面添加了邊距(頁面變得更長?)。然而,圖片在我的頁面上的位置不會改變。任何想法有什麼不對?

這是一些HTML的:

<body> 
    <div id="nav"> 
     <ul> 
      <li><a class="scroll" href="#about">ABOUT</a></li> 
      <li><a class="scroll" href="#portfolio">WORK</a></li> 
      <li><a class="scroll" href="#contact">CONTACT</a></li> 
     </ul> 
    </div> 

    <!-- Landing Page--> 
    <div id="landing"> 
     <img src="front.png" alt="Cover Page"> 
    </div> 
    <!-- About --> 
    <div id="page1"> 
     <a id="about"></a> 
     <img src="Who.png" alt="About Me"> 
     <p> 
      That sweet tailpipe of yours did have me charmed. It put a spell on me, but all the ass magic in Mexico can’t change Kenny Powers from his core beliefs. I’m not an ass man... I’m a tit man. I like big ass boobs — now, and forever... I’m not like a black guy, Vida... 
     </p> 
    </div> 

    <!-- Work --> 
    <div id="page2"> 
     <a id="portfolio"></a> 
     <div id="container"> 
      <a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a> 
     </div> 

    </div> 

    <!-- Contact --> 
    <div id="page3"> 
     <a id="contact"></a> 
     <img src="Contact.png" alt="Contact Information"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
    </div> 
</body> 

我說的頭是較低的網頁的標題中,而不是第一個元素。所以我不確定整個頁面爲什麼會下移。

+1

如果圖像是當然的會移動的所有元素下的第一個元素,被經過它的到來。爲了幫助您,我們需要更多代碼來了解您確切想要實現的目標。 – insertusernamehere

+0

css失蹤,爲了研究你的情況。嘗試jsfiddle它。 –

回答

6

看看相對定位適用於您:

position: relative; 
top: 10px; 
+0

這工作!謝謝 – user2001699