CSS - Làm cách nào để căn giữa các div lồng nhau?

Mới đối với CSS.CSS - Làm cách nào để căn giữa các div lồng nhau?

Tôi cố gắng để tập trung divs lồng nhau bằng cách sử dụng đoạn mã sau

HTML

<html> 
    <head> 
     <title>My website</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="formpanel"> 
       <div id="loginForm"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS

body { 
    margin: 0; 
    background : #90ADB7 url('images/background.png') repeat-x; 
    font-family: verdana, sans-serif; 
    font-size: 0.85em; 

} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    border-style:solid; 
    padding: 190px 0; 
} 

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
} 

#loginForm { 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

vấn đề là rằng div trong cùng (#loginForm) flushes với cạnh trên của div bên ngoài (#formpanel). Làm thế nào tôi nên tập trung div bên trong?

Ảnh chụp màn hình enter image description here

Nguồn

2011-12-07 Rahul

Kể từ @ câu trả lời BillyMoon từ năm 2011 là trong hàng đợi xóa, đây là liên kết ông ban đầu được đăng: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – royhowie

Bạn có thể sử dụng định vị tương đối:

http://jsfiddle.net/a879W/

Nguồn

2011-12-07 14:59:07 ptriek

Cảm ơn. Những công việc này. Cũng cảm ơn jsfiddle. Không biết về công cụ này. – Rahul

cho hậu thế: #loginForm { lề: tự động; vị trí: tương đối; hàng đầu: 25%; chiều rộng: 50%; chiều cao: 50%; màu nền: xanh dương; } – Rahul

#formpanel { 
    position: relative; 
    ... 
} 

#loginForm { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
    background-color:blue; 
}

Nguồn

2011-12-07 14:56:40

#loginForm { 
    position:absolute; 
    top:25%; 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

EDIT: top: 25% không 50%.

Nguồn

2011-12-07 14:57:08 Jivings

tôi nghĩ rằng nên được đầu trang: 25% ... – ptriek

Đẹp nhất, tôi đã bỏ lỡ điều đó. Cảm ơn. – Jivings

@Jivings, tính năng này không hoạt động. bạn có chắc chắn về vị trí: tuyệt đối không? – Rahul

Bạn có thể sử dụng định vị tuyệt đối:

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
    position:relative; 
} 

#loginForm { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    left: 100px; 
    top: 100px; 
    background-color:blue; 
}

Nguồn

2011-12-07 14:58:56

Và nếu cửa sổ được thay đổi kích thước? Định vị tuyệt đối không tốt cho việc định tâm các thành phần. – Jivings

Tôi giả định, vì div bao bọc có chiều rộng cố định, nên không cần phải thay đổi kích thước cửa sổ ... –

CSS - Làm cách nào để căn giữa các div lồng nhau?

Trả lời

Các vấn đề liên quan