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;し#footerます。float:center; margin:auto;両方とも無効であり、両方を複数の場所で使用しています。

于 2013-04-13T16:18:43.510 に答える
0

centerプロパティの有効な値ではfloatないため、これは機能しません。

float:center;

中央に配置する要素と、その親要素に追加する必要がある古い IE バージョンの場合は、 margin(少なくとも左と右) を に設定する必要があります。autotext-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 に答える