我想知道如何将我的整个网站组作为一个整体,并将其放在页面的中心。截至目前,我的网页稍微偏右。我尝试了多个教程,但是它们主要针对刚创建的站点。当我做他们对我的网站说的话,一切都变得不合适。因此,基本上,我如何将我的整个网站群组全部放入中间。
JsFiddle:http://jsfiddle.net/Ls2xknqa/
码:
<DOCTYPE!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<img src="/Users/alexparsons/Desktop/AvoArt/img/logo2.jpg" style="position: inherit; left: 10px; margin: 0 auto; ">
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">About Me</a>
</li>
<li>
<a href="#">Request Order</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<img src="/Users/alexparsons/Desktop/AvoArt/img/art1.jpg" style=" position: inherit; left: 40px; margin: 0 auto; margin-top: 40px;">
<p style="font-family: Abel, sans-serif; font-size: 16px; margin-left: 500px; margin- top: -250px;"> This is some random text. This random text will be filled later with other text that has to do with the picture to the right. The picture to the right has a lot to with some other stuff that is problebly very important. This is random text. This is random text. This is random text. This is random text. This is random text. This is random text. This is random text. </p>
<div class="line" style="background-color: #000; width: 1015px; height: 1px; margin-top: -200px;">
<div class="line" style="margin-left: 82px; background-color: #000; width: 100px; height: 4px; margin-top: -200px;">
</div>
</div>
</body>
</html>
提前致谢。
最佳答案
在<body>
标记之后插入<div id='container'>
,然后在</body>
标记之前插入</div>
。
然后在CSS中添加以下规则;
#container {
width: 1000px;
margin: 0 auto;
}
显然,您可以根据需要设置宽度。
当为边距指定两个参数时,第一个是顶部和底部边距,第二个是左侧和右侧。将左右设置为
auto
意味着页边距将“填充”父元素(在本例中为<body>
)中的剩余空间。希望这可以帮助。