I saw it on my blog yesterday! Let's take a look at the close-up:
The key to achieving the requirement is to find the central axis of the current page size, that is, the upper: 50%, left: 50%. The coordinate point is the central axis, but our layer has width and height. if you place a layer with a fixed width and height on this central axis, the layer will not be vertically and horizontally centered. Now we will merge the central axis of the layer with the central axis of the current page size into one, the requirement can be fulfilled.
- <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns = "http://www.w3.org/1999/xhtml">
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
- <SCRIPT type = "text/JavaScript" src = "include/JS/common. js"> </SCRIPT>
- <Title> Member registration </title>
- <Style type = "text/CSS">
- <! --
- @ Import URL ("include/CSS/popmodel.css ");
- -->
- </Style>
- </Head>
- <Body>
- <Div id = "sitepage">
- <Div id = "recordlist">
- <Form name = "form2" method = "Post" Action = "validateform. asp? Model = register ">
- <DL>
- <DT> <span id = "userstatus"> your Logon account </span> </DT>
- <DD> User name: <input type = "text" name = "login_user" id = "login_user" size = "30" maxlength = "16"/> </DD>
- </Dl>
- <DL>
- <DT> <span id = "passwordstatus"> password of the account </span> </DT>
- <DD> password: <input type = "password" name = "login_password" id = "login_password" size = "30" maxlength = "20"/> </DD>
- </Dl>
- <DL>
- <DT> <span id = "mailstatus"> email address bound to the account </span> </DT>
- <DD> mailbox: <input type = "text" name = "login_mail" id = "login_mail" size = "30"/> </DD>
- </Dl>
- <Label class = "Panel"> <input type = "Submit" name = "subbutton" value = "register"/> </label>
- </Form>
- </Div>
- </Div>
- </Body>
- </Html>
Recordlistlayers: Which layer should we use in its horizontal vertical environment? See popmodel.css.
- Body {margin: 0; padding: 0 ;}
- # Sitepage {margin: auto; width: auto; Height: auto ;}
- # Recordlist {position: absolute; width: 420px; Height: 230px; left: 50%; top: 50%; margin-left:-250px; margin-top:-100px; Border: 1px solid # CCC ;}
- # Recordlist DL {float: Left; margin: 0; padding-top: 5px; width: 400px ;}
- # Recordlist DL dt {float: Left; margin: 0; padding-left: 10px; width: 400px; Height: 30px ;}
- # Recordlist DL dd {float: Left; margin: 0; padding-left: 10px; padding-top: 5px; width: pixel PX; Height: 25px ;}
- # Recordlist DL dd label {display: inline; margin: 0; padding: 0; width: auto ;}
- # Recordlist DL dt {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000 ;}
- # Recordlist DL dd {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666 ;}
Note: margin-left:-250pxt and margin-top:-100; indicates that the recordlist box is left, and the width of the box is moved up, half of the height. in this way, the recordlist box is combined with the central axis of the current page to meet the requirements.
