Question

Office UI Fabric提供了here中记录的网格布局机制。行（“ ms-Grid-row”类）中的列条目属于“ ms-Grid-col”类。

由于所有条目始终以顶部对齐方式呈现，因此我无法使列条目的垂直对齐方式正常工作。据我了解，css属性为“ align-items：center;”。应该可以解决问题，但不会影响垂直对齐。

是否可以覆盖垂直对齐方式以使网格中的所有条目居中对齐？

Answer 1

我在Office UI CSS结构中看不到这种选项，但是，您可以使用FLEX CSS layout

对于这种方法，只需使用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>

Answer 2

我可能回答这个问题为时已晚。但是我找到了一种完美的方法：

将以下CSS应用于网格行元素（ms-Grid-col的父元素）：

.container{
  display: flex;
  align-items: center;
}

参考：https://www.smashingmagazine.com/2019/03/css-alignment/

Office UI Fabric网格中的垂直单元格对齐

2 个答案: