角材料布局对齐=“中心中心”不起作用

Posted 2023-02-22

技术标签:

【中文标题】角材料布局对齐=“中心中心”不起作用【英文标题】：Angular material layout-align = "center center" not working 【发布时间】：2016-02-22 05:05:57 【问题描述】：

我正在尝试使用 layout-align = "center center"，它应该将内容在垂直和水平方向对齐。但它只是水平对齐内容而不是垂直对齐。

这是我正在尝试的代码的 plnkr link。

<body ng-app="app" ng-controller="appCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
  <h2 flex>Hello Angular-material!</h2>
</div>
</md-toolbar>
<div class="flexbox-parent">
  <div layout="row" layout-align="center center">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>
</body>

【问题讨论】：

可能是因为它使用了 flexbox... 可能是您的浏览器的兼容性问题？你可以看看caniuse.com 我不明白，你想要this之类的东西吗？ 【参考方案1】：

它没有垂直居中的原因是因为你的 div 包含 layout-align 属性没有高度。

试试类似的东西

<div class="flexbox-parent">
  <div layout="row" layout-align="center center" style="min-height: 500px">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>

【讨论】：

如何在浏览器的整个视口上进行居中？ @Prabhdeep ：我的布局对齐的 div 有一个以 px 为单位的最小高度。仍然对我不起作用。如果您在 jsfiddle 中运行上面的代码，它工作得很好，请尝试确保您没有其他类或样式覆盖您的元素。这不是和问题完全一样吗？答案如何只是从问题中复制粘贴 html？ @BuffetTime 你是完全正确的.. 奇怪。似乎我的答案在几个月前被我修改了。我一定是疯了之类的。 o.O【参考方案2】：

Flexbox 垂直居中非常适合为父元素定义高度：

<div class="flexbox-parent">
  <div layout="row" layout-align="center center"  style="height: 100vh">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>

【讨论】：

【参考方案3】：

随便用

fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"

在你的父 div 上

【讨论】：

该问题与 Angular.js/angular-material 1.x 有关。您使用的 Angular 2+ 语法可能会让一些人感到困惑。

以上是关于角材料布局对齐=“中心中心”不起作用的主要内容，如果未能解决你的问题，请参考以下文章