Центрирующие кнопки в карточке дизайна материала (Vue)

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>

Фактические результаты этого можно увидеть здесь: