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">
© 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> .我试过寻找解决方案，但似乎没有成功。也许，如果有人是专家，他们是否可以修复我的代码以使其看起来不错？
最佳答案
你需要做很多改变。
为 .footer、.boxes 和 body 移除 position: absolute
并移除所有 #boxes
并添加.wrapper来制作内容中心。
给 margin: 0 auto 到 .footer
关于html - 无法在屏幕中居中 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26955387/