Question

这是注册表单.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>

这是我的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;
}

由于某种原因我无法找到它，页脚文本没有居中。看起来它以#other为中心，但#other和#footer都属于#content而#other不应该影响#footer

Answer 1

#regside正在流入页脚。如果减小此高度，文本将移动到中心。

#regside {
  height:460px
}

截至目前，文本集中在容器左侧和regside左侧。

Answer 2

margin: 0 auto;使用#footer。 float:center; margin:auto;都无效，您可以在多个地方使用它们。

Answer 3

center不是float属性的有效值，因此不起作用：

float:center;

您应该将margin（至少左侧和右侧）设置为auto以查找要居中的元素，并将旧的IE版本添加到其父元素text-align: center;。

Answer 4

试试这个新的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;
    }

它运作正常..

页脚不居中

4 个答案: