Định tâm dọc nhiều div trong div cha của nó

Question

Tôi có một tập hợp các phần tử bên trong phần tử cha. Chiều cao của phần tử gốc có thể thay đổi (nó sẽ được thay đổi bởi một số tệp jQuery). Dưới đây là cách bố cục hiển thị:

<div class = "parent"> 
    <div class="child1"> 
    </div> 
    <div class="child2"> 
    </div> 
</div> 

Tôi muốn các phần tử con kết thúc ở giữa div cha, nhưng tôi không thể tìm ra cách viết css để làm như vậy. Tôi đã thử viết những thứ như:

.child1 { 
     ... 
     vertical-align: middle; 
} 

Không hoạt động. Tôi cũng đã thử:

.parent { 
     display:table; 
} 
.child1 { 
     display:table-cell; 
     vertical-align:middle; 
} 

Điều này cũng không hiệu quả. Bất kỳ ý tưởng làm thế nào để làm điều này?

Answer 1

Kiểm tra liên kết này: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

này sẽ mang lại top con div của bạn đến 50% của container. chỉ cần thêm margin-top: - (x) px; trong đó (x) là một nửa chiều cao của con bạn.

Answer 2

Điều này hơi phức tạp hơn tiêu chuẩn của bạn "làm cách nào để căn chỉnh theo chiều dọc một div đơn lẻ bên trong vùng chứa chính".

Nếu bạn có nhiều số (có thể thay đổi) các phần tử con cần căn chỉnh theo chiều dọc hoặc nếu chiều cao của vùng chứa mẹ thay đổi, thì bạn sẽ cần sử dụng Javsacript/JQuery để đặt vị trí là không có " tiêu chuẩn "cách để áp dụng một sự liên kết dọc giữa cho nhiều phần tử con bên trong một thùng chứa cha mẹ chỉ sử dụng CSS. EDIT: Tôi đã được chứng minh sai, bạn có thể rõ ràng với việc sử dụng: trước phần tử giả, nhưng nó sẽ không hoạt động trong IE7 trừ khi bạn hack xung quanh nó.

Tôi đã thực hiện điều này trong một fiddle: http://jsfiddle.net/rJJah/20/

phần chính

1. Mỗi phần tử con có position:relative. Điều này là quan trọng bởi vì một số yếu tố con có thể có chiều cao thay đổi, và điều này loại bỏ sự cần thiết phải tính toán vị trí hàng đầu một cách riêng biệt cho mỗi.
2. Mỗi khi bạn thay đổi chiều cao của vùng chứa chính, bạn sẽ cần phải chạy lại các phép tính chiều cao và thiết lập mức bù đầu cho mỗi đứa trẻ.

Answer 3

Bạn có thể tạo một wrapper cho các yếu tố mà bạn muốn tập trung bên trong một container mà được làm trung tâm thay vì như vậy:

HTML

<div class ="parent"> 
    <div class="centerme"> 
     <div class="child1"> 
      .... 
     </div> 
     <div class="child2"> 
      .... 
     </div> 
     </div> 
</div> 

Sau đó, bạn chỉ có thể làm điều này:

CSS

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

Demo. Đã tìm thấy phương thức tại số CSS-tricks.

Answer 4

Bạn đã quên để áp dụng phong cách tương tự trên child2 như trên child1, như vậy:

.child1, .child2 { 
    display:table-cell; 
    vertical-align:middle; 
} 

Đây là một jsfiddle: http://jsfiddle.net/D853q/1/