Адаптивная сетка с равной высотой и вертикальным выравниванием - PullRequest
Новая
       27

Адаптивная сетка с равной высотой и вертикальным выравниванием

0 голосов
/ 27 января 2019

Я пытаюсь создать адаптивную сетку для моей веб-страницы.Это работает нормально, но я не могу использовать вертикальное выравнивание или поле: авто для центрирования содержимого столбца.Ни по вертикали, ни по горизонтали.

Я не могу найти решение.

Что-то не так с моим кодом? 

<style>
html {
    height: 100%;
}

body {
    margin: 0;
}

#content {
    width: 100%;
}

.row {
    clear: both;
    padding: 0px;
    margin: 0px;
    zoom:1; /* For IE 6/7 (trigger hasLayout) */

    &:before,
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

.c1 {
    display: block;
    float:left;
    width: 100%;
}

.c2 {
    display: block;
    float:left;
    width: 50%;
}
</style>

<div id="content">
    <div class="row">
         <div class="c1">
               <p></p>
          </div>
    </div>
    <div class="row">
         <div class="c2">
               <p></p>
          </div>

          <div class="c2">
               <p></p>
          </div>
    </div>
</div>

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

Но содержимое фиксируется в верхней части строки, и я не могу переместить его в центр.

...