Question

我想知道如何将整个网站组合在一起作为一个整体并将其集中在我的页面中。截至目前，我的网页略微偏向右侧。我尝试了多个教程，但它们主要面向刚刚创建的网站。当我按照他们对我的网站说的话时，一切都不合适。所以基本上我如何将我的整个网站组合在一起并将其粘在中间。

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>

提前致谢。

Answer 1

在<body>代码插入<div id='container'>之后，</body>代码插入</div>之前。

然后在CSS中添加以下规则;

#container {
    width: 1000px;
    margin: 0 auto;
}

显然，您可以根据需要设置宽度。

为边距指定两个参数时，第一个是上边距和下边距，第二个是左右边距。将左侧和右侧设置为auto表示边距将“填充”父元素中的剩余空间（在本例中为<body>）。

希望这有帮助。

将整个网站分组并集中在一起

1 个答案: