Как выровнять div в моем случае?

Question

Я пытаюсь установить div внутри другого div. Мой вопрос заключается в том, как установить красный дочерний div вертикальным выравниванием по середине и иметь меньшую высоту, чем родительский div. Смотрите мои коды.

HTML

<div class="container"> 
    <div class="sub-wrapper"> //Need this div to be vertical align to middle 
      text here    //and smaller height   
    </div> 
    <div class="bottom-wrapper"> 
     another text  
    </div> 
</div> 

CSS

.container { 
    display: table; 
    width: 100%; 
    height: 50px; 
    background-color: red; 
} 

.sub-wrapper { 
    display: table-cell; //I use table-cell to vertical align to middle 
    background-color: red; 
    height: 20px; //set 20px but doesn't take effect... 
} 


.bottom-wrapper { 
    display: table-cell; 
    width: 40%; 
    background-color: blue; 
} 

https://jsfiddle.net/zccdcmp5/1/

Спасибо за помощь!

Answer 1

Вертикальное выравнивание

Вам нужно добавить vertical-align: middle CSS свойство для того, чтобы разместить свой текст в середине вертикали. Просто добавьте к этому .sub-wrapper декларации:

.sub-wrapper { 
    display: table-cell; 
    background-color: red; 
    height: 20px; 

    vertical-align: middle; // Here it is :) 
} 

Вот an updated JSFiddle.

Высота

Вы не можете сделать высоту только div быть меньше, чем высота его родителя (таблицы) до тех пор, как он визуализируется в ячейке таблицы. Ячейки заполняют таблицу.

Существует несколько способов сделать это. Вы можете использовать padding, margin или создать контейнер с запасом. Однако почему вы хотите это сделать?

Answer 2

устанавливаемого сотовый трюк для вертикального центрирования (вы можете иметь любую высоту для вашего родителя или ребенка):

1. position: relative для родителей
2. position: absolute на ребенке
3. top: 50% на ребенке
4. -webkit-transform: translateY(-50%) о ребенке, добавить других поставщиков в реальное использование

Обязательно удалите display: table (или табличную ячейку) при попытке этого.

Это будет выровнять по центру ребенка, и из-за абсолютного положения другие братья и сестры не выровнятся ниже этого центрированного ребенка. Таблица-ячейка заставит вас в конечном итоге заняться всем пространством, вы можете добавить другую упаковку, чтобы иметь пользовательскую высоту. Мое решение здесь может быть менее многословным, если речь идет о разных высотах.

Answer 3

Просто сделай это он будет делать vertical-align:middle и делает текст в центре ..

CSS

.container { 
    display: table; 
    width: 100%; 
    height: 50px; 
    background-color: red; 
    text-align:center; 
} 

.sub-wrapper { 
    display: table-cell; 
    vertical-align:middle; 
    background-color: red; 
    height: 20px; 
} 


.bottom-wrapper { 
    display: table-cell; 
    width: 40%; 
    background-color: blue; 
} 

Answer 4

Использование display:inline-block даст вам, ваш необходимый выход.

Проверьте следующее:

.container { 
 
    background-color: red; 
 
    display: block; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
.sub-wrapper { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
    height: 20px; 
 
    vertical-align: middle; 
 
    width: calc(60% - 2px); 
 
} 
 
.bottom-wrapper { 
 
    background-color: blue; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    width: 40%; 
 
}

<div class="container"> 
 
     <div class="sub-wrapper"> 
 
      text here 
 
     </div><div class="bottom-wrapper"> 
 
     </div> 
 
</div>

Проверить Fiddle Here.

Надеются, что это помогает.