Html 图像居中，如何下移？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14507950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image centered, how to move it down?
提问by user2001699
I'm making a single page website. For the "lower" pages, I have images as my headers. I'm able to centre the image using
我正在制作一个单页网站。对于“较低”页面，我将图像作为标题。我可以使用将图像居中
img
{
display:block
margin-left:auto
margin-right:auto
width:400px
}
However, I require it to be a little bit lower. I tried adding a margin-top, but it seems to add a margin to the entire page (the page becomes longer?). The position of the image on my page, however, does not change. Any idea what's wrong?
但是，我要求它低一点。我尝试添加边距顶部，但它似乎为整个页面添加了边距（页面变长了？）。但是，图像在我的页面上的位置不会改变。知道出了什么问题吗？
This is some of the HTML:
这是一些 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>
The header i'm talking about is the header for the lower pages, not the first element. So I'm not sure why the whole page is moving down.
我正在谈论的标题是较低页面的标题，而不是第一个元素。所以我不确定为什么整个页面都在向下移动。
回答by Henrik
See if relative positioning works for you:
看看相对定位是否适合你：
position: relative;
top: 10px;
回答by naveen
just add.
<br> <br>breaks
lines to down.
只需添加。
<br> <br>断线向下。
