Вертикальное выравнивание ячеек в сетке Office UI Fabric - PullRequest
Новая
       8

Вертикальное выравнивание ячеек в сетке Office UI Fabric

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

Office UI Fabric предлагает задокументированный механизм расположения сетки здесь . Записи столбца в строке (класса "ms-Grid-row") имеют класс "ms-Grid-col".

Я не могу заставить вертикальное выравнивание записи столбца работать должным образом, поскольку все записи всегда отображаются с верхним выравниванием. Из того, что я понимаю, свойство css "align-items: center;" должен сделать трюк, но это не влияет на вертикальное выравнивание.

Можно ли переопределить вертикальное выравнивание, чтобы все записи в сетке были выровнены по центру?

1 Ответ

0 голосов
/ 05 марта 2019

Я не вижу такой опции в структуре CSS офисного пользовательского интерфейса, однако вы можете использовать FLEX CSS-макет

Для этого подхода просто используйте diplay:flex для строки сетки контейнера и добавьте дополнительные правила flex в соответствии с описанием в таблице, чтобы он выравнивал по вертикали любой столбец сетки что строка может содержать содержимое.

Пример: 

<div class="ms-Grid-row" style="display:flex">        
  <div class="ms-Grid-col  ms-sm6" >
    Content to be vertically aligned 1
  </div>
  <div class="ms-Grid-col  ms-sm6" >
    Content to be vertically aligned 2
  </div>
</div>
...