問(wèn)題描述

嘗試這個(gè)方法

position:absolute; top:50%; left:50%; margin-top:-260px; margin-left:-375px;

讓p居中時(shí)，最外層的p（login-main）實(shí)現(xiàn)了居中，但是當(dāng)我讓里層的p（login-input）也相對(duì)于其父元素居中時(shí)這個(gè)方法卻不行了，直接對(duì)著最外層p居中了。請(qǐng)問(wèn)為什么？是不是因?yàn)樗母冈馗?dòng)了？可是加了clearfix也沒(méi)用啊？我該如何改？謝謝。

這是html

<p class=’login-main’> <p class=’login-left clearfix’><p class=’login-form’> <p class=’login-input’></p> <p class=’login-input’></p> <p class=’login-input’></p> <p class=’login-input’></p> <p class=’login-input’></p> <p class=’login-input’></p></p> </p></p>

這是css

body{background:grey;}/*主體p居中*/.login-main {position:absolute;top:50%;left:50%;margin-top:-260px;margin-left:-375px;width:750px;height:520px;background:white; }/*注冊(cè)功能區(qū)*/.login-left {float:left;width:500px;height:480px;background:red; }/*注冊(cè)form*/.login-form {position:absolute;top:50%;left:50%;margin-top:-180px;margin-left:-230px;width:460px;height:360px;clear:both; }/*登錄等按鈕區(qū)*/.login-input {width:460px;height:60px;background:blue; }/*-----clearfix已經(jīng)省略----*/

問(wèn)題解答

應(yīng)該是position的問(wèn)題吧，子元素還是相對(duì)于body就行了絕對(duì)定位，你把父元素的absolute換成relative，子元素的left和top的偏移就會(huì)根據(jù)有relative的父元素決定。

你是想要這種效果嗎，這樣改就行

.login-left

{ float:left; width:500px; height:480px; background:red; position: relative;//這是新增的}回答3：

首先清除浮動(dòng)這一塊你再看看，這么清除是不對(duì)滴，子元素浮動(dòng)，父元素加clearfix，不是給自己加

那幾行樣式應(yīng)該寫(xiě)在login input里面吧