Question

我正在尝试将材料设计卡中的按钮居中。

我尝试过的大多数内容都与<md-card-actions>标签有关。我尝试过的方法无效：

<md-card-actions md-alignment="center"> 
<md-card-actions md-alignment="center-center">

下面的代码。

<template>
  <div class="hello">
    <!-- Line 4 here, with the link rel pulls google icons and roboto icons, this is part of Vue Material -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"> 
    <md-card md-elevation-15>
      <md-card-actions md-alignment="center"> 
        <md-button>Action</md-button>
        <md-button>AnotherAction</md-button>
      </md-card-actions>
    </md-card>
  </div>  
</template>


<script>
export default {
  name: 'HelloWorld',
  props: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .md-card {
    width: 80%;
    height: 200px;
    margin: 4px;
    display: inline-block;
    vertical-align: center;
  }
</style>

其实际结果可以在这里看到：

Answer 1

我知道这有点老了，但是我遇到了同样的问题。这是我解决的方法：

向您的组件添加一些CSS：

<style lang="scss" scoped>
  .center-span {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
</style>

然后在md-card-actions元素内的按钮周围弹出一个跨度，并将该CSS类应用于该跨度：

<md-card-actions>
        <span class="center-span">
            <md-button class="md-dense md-mini md-icon-button md-transparent" @click="firstPage">
                <md-tooltip md-direction="top">First Page</md-tooltip>
                <md-icon>first_page</md-icon>
            </md-button>
            <md-button class="md-dense md-mini md-icon-button md-transparent" @click="previousPage">
                <md-tooltip md-direction="top">Previous Page</md-tooltip>
                <md-icon>navigate_before</md-icon>
            </md-button>
            <md-button class="md-dense md-mini md-icon-button md-transparent" @click="nextPage">
                <md-tooltip md-direction="top">Next Page</md-tooltip>
                <md-icon>navigate_next</md-icon>
            </md-button>
            <md-button class="md-dense md-mini md-icon-button md-transparent" @click="lastPage">
                <md-tooltip md-direction="top">Last Page</md-tooltip>
                <md-icon>last_page</md-icon>
            </md-button>
        </span>
</md-card-actions>

这是结果：

材质设计卡（Vue）中的居中按钮

1 个答案: