首先我們要了解樣式中的這兩種定位;
absolute(絕對定位):將被賦予的物件從文件流中拖出,使用left,right,top,bottom等屬性相對於最接近的一個最有定位設置的父級物件進行絕對定位,如果父級沒有進行定位屬性設置,則按照預設規則來設定(根據body左上角作為參考進行定位),同時絕對定位的物件可層疊。
relative(相對定位):物件不可重疊,使用left,right,top,bottom等屬性在正常的文檔流中進行定位,其物件不可以層疊。
居中:
1,對於使用了absolute定位的物件為了達到自適應居中的效果,要設定其作用物件的寬度;例如以下程式碼實現的居中
.ceshi { position:absolute; bottom: 10%; display: block; width: 250px; left:50%; margin-left:-125px; }
2,對於使用了relative定位的對象達到居中的效果,因為其在正常的文檔流中,所以其參考對象為其自身,可以進行如下設置:
.ceshi2 { margin:0 auto; }
以上是css樣式中position屬性absolute以及relative水平居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!