其中html代码如下,问题在代码后: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <link type="text/css" href="css/login.css" rel="stylesheet" /> </head> <body> <div class="contianer"> <div class="login"> <header> <label>注册界面</label> </header> <hr /> <div class="information"> <header> <div class="heads"> <h2 class="zc">注册 </h2><h4 class="denglu"><a href="#"> 登陆</a></h4> </div> </header> <div class="forms"> <form method="post"> <table class="tb"> <tr> <td>用户名:</td> <td><input type="text" placeholder="至少4个字符"></td> </tr> <tr> <td>密码:</td> <td><input type="password" placeholder="至少8个字符"></td> </tr> <tr> <td>身份证:</td> <td><input type="text" placeholder="18位数字"></td> </tr> <tr> <td>邮箱:</td> <td><input type="text" placeholder="18位数字"></td> </tr> </table> <footer> <div class="btn"> <input type="submit" value="提交" class="sub"/> <input type="reset" value="重置" class="sub"/> </div> </footer> </form> </div> </div> </div> <div class="xieyi"> <div class="bg"> <div class="text_xieyi"> <span> 协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。 协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。 </span> </div> <div class="btn_xieyi"> <button class="sub" id="xieyiok">确定</button> <button class="sub" id="xieyireset">取消</button> </div> </div> </div> </div> </body> </html>
需要居中显示部分:class="information" 的div模块 和 class="xieyi"的div模块,
问题1:
其中xieyi模块的css我是这样写的可以居中,但是总感觉不太好,不知道是否合理?以及如果模块宽高是非固定情况改如何做?
问题2:
information模块部分,非固定宽高,写了好久都无法页面居中,求教css写法?
问题1代码: .xieyi{ width: 500px; position: absolute; float: left; background-color: #696969; display: block; margin-left: -250px; left:50%; margin-top:25%; } .contianer{ width: 900px; height: 900px; background-color: antiquewhite; margin: auto; } .zc{ color: #FFFFFF; float: left; margin-left: 10px; } .denglu{ position: relative; float: right; right: 10px; } .forms{ color: #FFFFFF; clear: both; } .login{ position: absolute; float: left; } .information{ border: 1px solid red; width: 300px; background-color: dimgray; }
问题简化代码:
<div class="d1"> ...... ...... <div class="d2"> ...... <div class="d3"> 问题:在d1 ,d2是其他显示布局样式时候,有且仅d3为界面居中CSS写的方式(固定规格和非固定规格)?? </div> ...... </div> ...... ...... </div>
蛋加树
司禄德
Happy_learning
慕粉3365042