使用 Angular 材质的中心导航答案

【问题标题】：Center nav with Angular Material使用 Angular 材质的中心导航
【发布时间】：2017-02-18 01:52:40
【问题描述】：

我试图将我的导航栏居中，但是当我使用 layout-align='space-between center' 时，它并没有占用 100% 的宽度，而且它的行为就像一个内联元素。

我正在关注文档，但没有任何效果...这是代码：

<body ng-app="PetApp" layout='row'>

<div layout="row" flex>
  <md-nav-bar layout-fill aria-label='Main Menu' md-selected-nav-item="currentNavItem">
      <md-nav-item md-nav-sref='#inicio' name="inicio">Inicio</md-nav-item>
      <md-nav-item md-nav-sref="#conheca" name="conheca">O Aplicativo</md-nav-item>
      <md-nav-item md-nav-href="#cadastro" name='cadastro'>Cadastre-se</md-nav-item>
      <md-nav-item md-nav-href="#contato" name='contato'>Contato</md-nav-item>
  </md-nav-bar>
</div>

<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>

<script type="text/javascript">
  angular.module('PetApp', ['ngMaterial']);
</script>

提前致谢！

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

使用布局选项居中 md-navbar

  <div layout="row" layout-align="center" flex="70">

DEMO

【讨论】：

我试过了，它居中，但它失去了 100% 的宽度，如您所见：imgur.com/7iMpViU
阅读 ng-material 文档中的布局选项。如果有帮助，请标记为答案