Pionowe centrowanie wielu elementów div w rodzica div

Question

Mam zestaw elementów wewnątrz elementu nadrzędnego. Wysokość elementu nadrzędnego może się zmienić (zostanie zmieniona przez niektóre pliki jQuery). Oto jak wygląda układ:

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

Chcę elementy podrzędne skończyć wyrównane na środku div, ale nie mogę dowiedzieć się, jak napisać css, aby to zrobić. Próbowałem pisać takie rzeczy jak:

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

Który nie działa. Próbowałem również:

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

To również nie działa. Wszelkie pomysły, jak to zrobić?

Answer 1

Sprawdź ten link: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

to przyniesie swoje dziecko div Top 50% pojemnika. po prostu dodaj margin-top: - (x) px; gdzie (x) stanowi połowę wysokości twojego div dziecka.

Answer 2

Jest to nieco bardziej skomplikowane niż standardowe "jak wyrównać w pionie pojedynczy element div w kontenerze nadrzędnym".

Jeśli masz wiele numerów (które można zmienić) elementów podrzędnych, które należy wyrównać w pionie lub jeśli zmieni się wysokość kontenera nadrzędnego, musisz użyć Javsacript/JQuery, aby ustawić pozycję, ponieważ nie ma " standardowy "sposób na zastosowanie środkowego pionowego wyrównania do wielu elementów potomnych w kontenerze nadrzędnym z wykorzystaniem tylko CSS. EDYCJA: Zostałem udowodniony źle, można najwyraźniej przy użyciu: przed pseudoelementem, ale nie będzie działać w IE7, chyba że hakować wokół niego.

I zostały wdrożone w ten ryba: http://jsfiddle.net/rJJah/20/

Główne części

1. Każdy element Dziecko ma position:relative. Jest to ważne, ponieważ niektóre elementy podrzędne mogą mieć zmienną wysokość, co eliminuje potrzebę obliczania najwyższej pozycji osobno dla każdej z nich.
2. Za każdym razem, gdy zmieniasz wysokość pojemnika nadrzędnego, będziesz musiał ponownie wykonać obliczenia wysokości i ustawić górne przesunięcie dla każdego dziecka.

Answer 3

Można utworzyć opakowanie dla elementów, które chcesz wyśrodkować wewnątrz kontenera, który pobiera środku zamiast tak:

HTML

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

Następnie można po prostu to zrobić:

CSS

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

Demo. Metoda znaleziona pod adresem CSS-tricks.

Answer 4

zapomni się zastosować tę samą stylizację na child2 jak na child1, tak:

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

Oto jsfiddle: http://jsfiddle.net/D853q/1/