0

登録ボックスは次のとおりです。

http://technicaldebt.co.uk/fyp/register.php

ボックスをWebページの中央に配置しようとしています。以下にCSSを添付します。どんな助けでも大歓迎です。

#fg_membersite fieldset {
left: 50%;
top: 50%;
width: 230px;
margin-top: -125px: /* height/2 */
margin-left: -115px; /* width/2 */
position: absolute;
}

#fg_membersite legend, #fg_membersite h2
{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}

#fg_membersite label
{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}

#fg_membersite input[type="text"],#fg_membersite textarea,
#fg_membersite input[type="password"]
{
  font-family : Arial, Verdana, sans-serif;
  font-size: 0.8em;
line-height:140%;
color : #000; 
padding : 3px; 
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

}

#fg_membersite input[type="text"],
#fg_membersite input[type="password"]
{
height:18px;
width:220px;
}

#fg_membersite #scaptcha
{
width:60px;
height:18px;
}

#fg_membersite input[type="submit"]
{
width:100px;
height:30px;
padding-left:0px;
}

#fg_membersite textarea
{
height:120px;
width:310px;
}

#fg_membersite input[type="text"]:focus,
#fg_membersite textarea:focus
{
color : #009;
border : 1px solid #990000;
background-color : #ffff99;
font-weight:bold;
}

#fg_membersite .container
{
margin-top:8px;
margin-bottom: 10px;
}

#fg_membersite .error
{
 font-family: Verdana, Arial, sans-serif; 
 font-size: 0.7em;
 color: #900;
 background-color : #ffff00;
}

#fg_membersite #register_password_errorloc
{
  clear:both;
}

#fg_membersite  fieldset#antispam
{
 padding:2px;
 border-top:1px solid #EEE;
 border-left:0;
 border-right:0;
 border-bottom:0;
 width:350px;
}

#fg_membersite fieldset#antispam legend
{
    font-family : Arial, sans-serif;
   font-size: 0.8em;
   font-weight:bold;
 color:#333;    
}

#fg_membersite .short_explanation
{
   font-family : Arial, sans-serif;
   font-size: 0.6em;
 color:#333;   
}

/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#fg_membersite .spmhidip
{
 display:none;
 width:10px;
 height:3px;
}
#fg_membersite #fg_crdiv
{
   font-family : Arial, sans-serif;
   font-size: 0.3em;
 opacity: .2;
 -moz-opacity: .2;
 filter: alpha(opacity=20);   
}
#fg_membersite  #fg_crdiv p
{
  display:none;
}

    #fg_membersite_content li
  {
   font-family : Arial, sans-serif;
  padding-top:10px;
  padding-bottom:10px;
}
    #fg_membersite_content 
{
         font-family : Arial, sans-serif;
         font-size: 0.9em;
  line-height: 150%
 }

#fg_membersite_content h2
  {
   font-family : Arial, sans-serif;
   font-size: 1.5em;
   font-weight:bold;
 color:#333;
}

以下の HTML:

<!-- Form Code Start -->
<div id='fg_membersite'>
<form id='register' action='/fyp/register.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>



<input type='hidden' name='submitted' id='submitted' value='1'/>

<div class='short_explanation'>* required fields</div>

<input type='text'  class='spmhidip' name='spe8306af0d23b01a2bf7c1734aacf25fe' />

<div><span class='error'></span></div>
<div class='container'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' value='' maxlength="50" /><br/>
<span id='register_name_errorloc' class='error'></span>
</div>

<div class='container'>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' value='' maxlength="50" /><br/>
<span id='register_email_errorloc' class='error'></span>
</div>

<div class='container'>
<label for='username' >UserName*:</label><br/>
<input type='text' name='username' id='username' value='' maxlength="50" /><br/>
<span id='register_username_errorloc' class='error'></span>
</div>

<div class='container' style='height:80px;'>
<label for='password' >Password*:</label><br/>
<div class='pwdwidgetdiv' id='thepwddiv' ></div>
<noscript>
<input type='password' name='password' id='password' maxlength="50" />
</noscript>    
<div id='register_password_errorloc' class='error' style='clear:both'></div>
</div>

<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>

</fieldset>
</form>
4

4 に答える 4

1

display: tableなんらかのセットアップを使用しないと、JavaScript または要素自体の高さを知らずに垂直方向に中央揃えすることはできません。

#fg_membersite fieldset {
    display: inline-block;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    width: 230px;
    margin-top: -181px;
    margin-left: -115px;
    position: absolute;
}

「181px」は、フィールドセットが解決される 362px の高さに由来します。高さが変わった場合は、それを更新する必要があります。

于 2013-03-05T15:35:34.450 に答える
0

マージンの定義は無視されています。CSS 定義に:セミコロン ( ) の代わりにコロンがあります。;

#fg_membersite fieldset {
    left: 50%;
    top: 50%;
    width: 230px;
    margin-top: -125px; /* height/2 */
    margin-left: -115px; /* width/2 */
    position: absolute;
}
于 2013-03-05T15:35:31.433 に答える
0

ボックスを水平方向に中央に配置する位置を削除#fg_membersite fieldsetし、javascript を使用して垂直方向に配置します。このようなもの：

JavaScript を使用: (タグの最後にロードbody)

<script>
  var body = document.body;
  var bodyHeight = body.offsetHeight;
  var box = document.getElementById('main'); //replace 'main' with Id of the fieldset  
  var height = box.offsetHeight;
  box.style.marginTop = ((bodyHeight/2) - (height/2));
</script>

シンプルな JavaScript を使用した Fiddle の作業

jQueryを使ったFiddleの作業

于 2013-03-05T15:37:32.483 に答える
-1

を削除します

「左:50%」

と

右:50%

css の:

fg_membersite フィールドセット

そして使う

位置:相対; 左マージン：自動; margin-right:auto

于 2013-03-05T15:33:37.570 に答える