页脚未居中
[英]Footer not centered
问题描述
This is the registration form .php 
这是注册表格.php
<?php
?>
<html>
<head>
<title>Registration Form</title>
<link href="register.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id = "everything">
<div id = "header">
Register
</div>
<div id = "content">
<div id = "regside">
<form name="register" action="success.php" method="get" >
Username: <input name="username" type="text" maxlength="30" /><br><br>
Password: <input name="password" type="password" maxlength="30" /><br><br>
Confirm Password: <input name="cpassword" type="password" maxlength="30" /><br><br>
Lastname: <input name="lastname" type="text" maxlength="30" /><br><br>
Firstname: <input name="firstname" type="text" maxlength="30" /><br><br>
Middlename: <input name="middlename" type="text" maxlength="30" /><br><br>
Email Address: <input name="eemail" type="text" maxlength="30" /><br><br>
<input name="register" type="submit" value="Register" style = "width:100px; height:50px;" />
</form>
</div>
<div id = "other">
</div>
</div>
<div id = "footer">I am another footer :D</div>
</div>
and this is my css 这是我的CSS
body{
background-color:#C1F4F4;
height:600px;
width:800px;
float:center;
margin:auto;
padding-top:20px;
}
#everything{
-moz-border-radius: 15px;
border-radius: 15px;
background-color:#000;
float:center;
margin:auto;
overflow:hidden;
}
#header {
text-align: center;
color:#FFF;
font-size: 20px;
height:30px;
padding:10px;
}
#content{
background-color:#E6F2F2;
height:500px;
width:100%;
}
#regside{
color:#000;
float:right;
width:40%;
height:500px;
text-align: right;
padding: 20px;
}
#other{
background-image:url(photos/anime.png);
background-repeat:no-repeat;
background-size:100%;
height:500px;
width:50%;
float:left;
}
#footer{
color:#FFF;
height:10px;
width:100%;
margin: auto;
padding:10px;
text-align: center;
}
For a reason I can't find out it the footer text is not centered. 由于某种原因，我无法找到页脚文本未居中的位置。 It looks like it is centered with #other but both #other and #footer belong to #content and #other shouldn't be able to affect #footer . 看起来它以#other为中心，但#other和#footer属于#content并且#other不应该影响#footer 。
4 个解决方案
解决方案1
1 已采纳 2013-04-13 16:20:03
#regside is bleeding into the footer. #regside正在渗入页脚。 If you decrease the height of this, the text will move to the center. 如果减小其高度，则文本将移到中间。
#regside {
height:460px
}
As of right now, the text is centralized between the left of the container and the left of the regside . 截至目前，文本集中在容器的左侧和regside的左侧regside 。
解决方案2
0 2013-04-13 16:18:43
Use margin: 0 auto; 使用margin: 0 auto; for #footer . 为#footer 。 float:center; margin:auto; are both invalid, and you use them both in multiple places. 都无效，并且您在多个地方都使用了它们。
解决方案3
0 2013-04-13 16:19:45
center is not a valid value for the float property, so this is not going to work: center不是float属性的有效值，因此无法正常工作：
float:center;
You should set the margin (at least left and right) to auto for the elements you want to center and for old IE verions you should add text-align: center; 您应将要居中的元素的margin （至少向左和向右）设置为auto ，对于旧的IE版本，应添加text-align: center; to its parent element. 到其父元素。
解决方案4
0 2013-04-13 16:27:51
Try this new css 试试这个新的CSS
body{
background-color:#C1F4F4;
height:600px;
width:800px;
float:center;
margin:auto;
padding-top:20px;
}
#everything{
-moz-border-radius: 15px;
border-radius: 15px;
background-color:#000;
float:center;
margin:auto;
overflow:hidden;
}
#header {
text-align: center;
color:#FFF;
font-size: 20px;
height:30px;
padding:10px;
}
#content{
background-color:#E6F2F2;
height:500px;
width:100%;
}
#regside {
color: #000000;
float: right;
height: 480px;
margin-top: 20px;
padding: 0 20px 0 0;
text-align: right;
width: 40%;
}
#other{
background-image:url(photos/anime.png);
background-repeat:no-repeat;
background-size:100%;
height:500px;
width:50%;
float:left;
}
#footer{
color:#FFF;
height:20px;
width:100%;
margin: auto;
padding:10px;
text-align: center;
}
It's working properly.. 它工作正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.