vue.js - Material Design Card (Vue) 中的居中按钮

Question

我正在尝试将 Material Design Card 中的按钮居中。

我尝试过的大部分内容都与<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>

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

标签： vue.jsmaterial-designvue-component

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>

这是结果：