css - Angular Material 2-如何居中对齐并减小宽度

这是我的html

<md-tab-group>
  <md-tab>
    <template md-tab-label>One</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>
      </md-content>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab Two</h1>
      </md-content>
    </template>
  </md-tab>
</md-tab-group>

这在台式机和移动设备上占据了全角，对于在台式机和居中对齐时以50％的宽度呈现内容，需要进行哪些更改？

最佳答案

这都是HTML，您没有展示样式（CSS）的功能。

使用bootstrap，您可以添加以下两个类“ col-md-6 col-offset-md-3”将完成您要的工作。像这样：

<md-tab-group class="col-md-6 col-offset-md-3">
  <md-tab>
    <template md-tab-label>One</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>
      </md-content>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab Two</h1>
      </md-content>
    </template>
  </md-tab>
</md-tab-group>

关于css - Angular Material 2-如何居中对齐并减小宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38089244/