Question

HTML代码：

<body>
<!-- Social Media Icons -->
<div id="sm1"><a href="/"><img src="images/facebook.png" height=40 width=40></img></a>
</div>
<div id="sm2"><a href="/"><img src="images/twitter.png" height=40 width=40></img><a></div>
    <!-- Logo -->
    <div id="logo"><img src="images/logo.png"</img></div>
    <div id="slogan"><blockquote>Insert slogan here...</blockquote></div>
    <!-- Slideshow -->
    <div id="slideshow"></div>
    <!-- Box -->
    <div id="box1" class="boxes"></div>
    <div id="box2" class="boxes"></div>
    <div id="box3" class="boxes"></div>
    <div id="box4" class="boxes"></div>
    <!-- Footer -->
    <div id="footer">
        <div id="footerimg">
        <center>
            <img src="images/facebook.png" height=20 width=20></img>
            <img src="images/twitter.png" height=20 width=20></img>
            </div>
            <div id="footertext">
            &copy; 2014 My Designs. All Rights Reserved.
        </div>
    </div>
        </body>

CSS代码：

            /*Tags*/
        body {
            position:absolute;
            margin-left:100px;
        }
        blockquote {
            font-style:italic;
        }
        /*Div Id*/
        #logo {
            position:absolute;
            width:150px;
            height:40px;
            margin-top:20px;
        }
        #sm1 {
            position:absolute;
            width:40px;
            height:40px;
            margin-top:20px;
            margin-left:650px;
        }
        #sm2 {
            position:absolute;
            width:40px;
            height:40px;
            margin-top:20px;
            margin-left:710px;
        }
        #slideshow {
            width:750px;
            height:400px;
            background-color:purple;
            margin-top:80px;
        }
        #box1 {
            background-color:aqua;
        }
        #box2 {
            margin-left:190px;
            background-color:fuchsia;
        }
        #box3 {
            margin-left:380px;
            background-color:gray;
        }
        #box4 {
            margin-left:570px;
            background-color:green;
        }
         #footer {

         width:750px;
         height:50px;
         background-color:olive;
         position:absolute;
         margin-top:140px;
         text-align:center;
         font-family:sans-serif;
     }
        }
        #slogan {
            position:absolute;
            margin-left:120px;
            margin-top:15px;
        }
        #footerimg {
            margin-top:5px;
        }
        #footertext {
            color:white;
        }
        /*Div Class*/
        .boxes {
            margin-top:10px;
            position:absolute;
            width:180px;
            height:120px;
        }

我正在尝试将所有代码集中在<body></body>和<footer></footer>中。我试过寻找解决方案，但似乎没有成功。也许，如果有人是专家，他们可能会修复我的代码，所以它看起来不错吗？

谢谢！ http://jsfiddle.net/prL6doct/

Answer 1

请更改此宽度：750px;

 #footer {

        width:750px;
        height:50px;
        background-color:olive;
        position:absolute;
        margin-top:140px;
        text-align:center;
        font-family:sans-serif;
    }

它对我有用，希望这是你想要的。

编辑：请参阅此http://jsfiddle.net/sheralam/b2mzrgxo/，希望这是您想要的。

Answer 2

你需要做很多改变。

Here is the updated code.

删除position: absolute，.footer和.boxes

的body

并删除所有#boxes

的左边距

添加.wrapper以构建内容中心。

将margin: 0 auto提交给.footer

Answer 3

以页面内容为中心，你可以将body标签之后的所有内容包装在div中，通常称为容器div（id = container，但你可以给出你想要的任何id）。然后将以下样式应用于容器div

 #container{
   margin:0 auto;
   width:    ; // apply any suitable width till the layout is centered
   }

无法在屏幕中居中一个div

3 个答案: