其中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>
4 回答
已采納
蛋加樹
TA貢獻29條經驗 獲得超13個贊
水平居中一般是設置margin:0 auto;其中0是上下外邊距的值，auto是左右外邊距的值——因為是auto(自動)，所以不管這個元素的寬度是否固定，都是生效的,不過這個方法只能用于塊級元素,比如div。
注意，這里所說的居中，是相對于其父級元素而言的，也就是說假如是這樣的結構——<div><div></div></div>,內層的div設置了margin:0 auto;它的位置不會因此就相對于窗口(其實是body元素)水平居中，而是相對于外層div水平居中而已。
如果是行內元素，要想使用上述方法，可以將其變成塊級元素，設置display:block;或者display:table;或者display:flex;等等。
定位的使用要看情況而定，因為定位往往會脫離文檔流，影響到后面的元素。
司祿德
TA貢獻1條經驗 獲得超0個贊
.xieyi{margin:0 auto;}補充這個居中
至于.information部分，如果沒設定寬度的話，可以給他設定text-align:center;或者是
float:left; position:relative; left:50%;相對定位，偏移50%到頁面中間，然后子元素再設定-50%，此時子元素相對于父元素向左偏移50%，就達到居中的目的了
Happy_learning
TA貢獻7條經驗 獲得超1個贊
margin：0?auto；
這個代碼是居中? ? ? ?
margin后面如果只有兩個參數的話，第一個表示top和bottom，第二個表示left和right
因為0 auto，表示上下邊界為0，左右則根據寬度自適應相同值（即居中）
- 4 回答
- 1 關注
- 2766 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消