0

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

4

4 回答 4

1

#regside正在流血到页脚。如果你降低它的高度，文本将移动到中心。

#regside {
  height:460px
}

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

于 2013-04-13T16:20:03.820 回答
0

用于. margin: 0 auto;_ 都是无效的，并且您在多个地方都使用它们。#footerfloat:center; margin:auto;

于 2013-04-13T16:18:43.510 回答
0

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

float:center;

您应该为要居中的元素设置margin（至少左右）to auto，对于旧的 IE 版本，您应该添加text-align: center;到其父元素。

于 2013-04-13T16:19:45.127 回答
0

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

它工作正常..

于 2013-04-13T16:27:51.327 回答