Javascript 如何在angularjs材质设计中显示标题中心对齐的选项卡

我正在跟踪我网页中选项卡的此链接

这是选项卡的代码

<div ng-cloak>
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>

      <md-tab label="one">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="two">
        <md-content class="md-padding">
            <p> Tab 2 contents</p>
        </md-content>
      </md-tab>

      <md-tab label="three">
        <md-content class="md-padding">
            <p> Tab 3 contents</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

表2目录

表2目录

表3目录

上面的代码在HTML页面的左侧显示选项卡标题

如何在HTML页面的中心显示选项卡标题

我还有一个要求。选项卡1内容中有一个按钮。单击该按钮后，如何移动到第二个选项卡

您可以使用以下链接对齐标题/任何元素的中心/左侧/底部等

例如：-

layout=“row”layout align=“center”

用于将选项卡设置为向导

控制器逻辑：-

$scope.max = 2; // max you can put your number 
  $scope.selectedIndex = 0;
  $scope.nextTab = function() {
    var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
    $scope.selectedIndex = index;

  };

Html:-

   <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex" md-center-tabs="true">
      .....
   </md-tabs>

.....

行动中的暴徒：-

md center tabs=“true”为我工作

<md-tabs md-center-tabs="true" md-dynamic-height md-border-bottom class="md-primary" style="border: none;">

标签在您提供的plnkr链接中是左对齐的，请查看标签的中心位置。对我来说，标签仍然显示为左对齐，但未居中。不，我添加了一些代码使其居中，让我检查并更新答案，然后请查看并让我知道我更新了答案添加了新的标签