Jak w pionie wyśrodkować zawartość elementów div dziecka w div jednostki nadrzędnej w układzie płynów

Question

Mam element div, który zawiera dwa elementy div dziecka i są one przeznaczone do układu płynów, więc nie mogę ustawić dla nich stałej wielkości w px.

Istnieją dwa cele tutaj:

1. Dopasuj dwa DIV poziomo dzieci, które udało mi się osiągnąć za pomocą float: left i float: right odpowiednio.

2. Wyśrodkuj w pionie tekst (w elementach div dziecka) względem div elementu nadrzędnego. Tekst jest krótki i zajmuje pojedynczą linię według projektu.

Co mam teraz: http://jsfiddle.net/yX3p9/

Podobno dwa DIV dziecko nie biorą pełną wysokość div nadrzędnej, a zatem ich tekst nie są pionowo wyśrodkowany względem div nadrzędnej.

Pojęciowo, aby osiągnąć powyższe cele, możemy albo uczynić elementy div dziećmi pionowo w środku div jednostki, albo możemy sprawić, że divy będą miały pełną wysokość div elementu nadrzędnego. Jaki jest solidny sposób, aby to zrobić?

* Obsługa przeglądarki: IE 9+ i inne zwykłe nowoczesne przeglądarki.

Answer 1

zaktualizowałem swój skrzypce: http://jsfiddle.net/yX3p9/7/

użyłem display: table-cell; w celu wykorzystania vertical-align: middle;

Answer 2

Użyj line-height. Jeśli jest to tylko jedna linia tekstu, wysoka wysokość linii skutecznie umieści tekst w środku linii.

Lub spróbuj display:table-cell w połączeniu z vertical-align.

Answer 3

Oprócz przy użyciu tabel CSS, można również korzystać z pozycjonowania bezwzględnego, aby uzyskać podobny układ.

Korzystanie z HTML, jak jest (bez dodatkowych elementów), stosuje się następujące CSS:

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 
.parent { 
    background-color: grey; 
    height: 20%; 
    line-height: 1.6em; 
    font-size: 1.6em; 
    min-height: 1.6em; 
    position: relative; 
} 
.left, .right { 
    position: absolute; 
    top: 50%; 
    margin-top: -0.8em; 
} 
.left { 
    background-color: yellow; 
    padding-left: 20px; 
    left: 0; 
} 
.right { 
    background-color: red; 
    padding-right: 20px; 
    right: 0; 
} 

Można zobaczyć skrzypce demo w: http://jsfiddle.net/audetwebdesign/cByHa/

W pojemniku .parent ustaw line-height do jawnej wartości (1.6em jako rozmiar czcionki), position: relative i min-height, aby zachować wystarczającą wysokość tekstu.

dwa elementy podrzędne .left.right i są umieszczone całkowicie z top: 50% i używać margin-top: -0.8em uzyskać pionowy centrujące (stosować połowę wartości linia wysokość).

Użyj przesunięć w lewo i w prawo (lub dopełnienia), aby dostosować pozycję poziomą elementów potomnych w razie potrzeby.

Answer 4

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 

.parent { 
    height: 50px; 
    background-color: grey; 
    font-size: 1.6em; 
} 

.left { 
    margin-left: 2%; 
    float: left; 
    background-color: yellow; 
    height:100%; 
} 

.right { 
    margin-right: 2%; 
    float: right; 
    background-color: red; 
    height:100%;  
} 
.parent span{ 
    display:table; 
    height:100%; 
} 
.parent em{ 
    display:table-cell; 
    vertical-align:middle; 

} 

http://jsfiddle.net/yX3p9/13/

Answer 5

wolę posługiwać przekształcić powyżej powyższych odpowiedzi.

top: 50%; 
transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-o-transform: translateY(-50%); 

Z mojego doświadczenia wynika, że ​​działa w wielu sytuacjach i na wszystkich głównych przeglądarek (nawet IE9 +).

Jeśli używasz SCSS, może nawet jak wdrożyć tę mixin:

@mixin v-align($position: absolute){ 
    position: $position; top: 50%; 
    transform: translateY(-50%); 
    -ms-transform:translateY(-50%); /* IE */ 
    -moz-transform:translateY(-50%); /* Firefox */ 
    -webkit-transform:translateY(-50%); /* Safari and Chrome */ 
    -o-transform:translateY(-50%); 
}